Create a Sticky Header or Sticky Footer Using CSS

How to Create a Sticky Header or Sticky Footer Using CSS


A sticky header or sticky footer means that when you scroll on a page, they stay in a fixed position on the page as you do so. Here on TutorialBasement I am using a sticky navigation in the header for example. In today’s CSS tutorial I’ll be teaching you how to create both of these as well as a simple trick for WordPress bloggers and the WordPress admin bar with a sticky header. Let’s get started!


Step 1: Creating the HTML Markup

First we need to create a new HTML document, name it index.html. Then we will create some basic markup that we can style. I’ve added some lorem ipsum paragraphs to the content area on mine so there is enough length on the page to preview the sticky in effect.

<!DOCTYPE html>
<html>
<head>
    <title>Create a Sticky Header or Sticky Footer Using CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="sticky-header">

        <div class="navbg">

            <div class="wrapper">

                <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul><!-- end .nav -->

            </div><!-- end .wrapper -->

        </div><!-- end .navbg -->

    </div><!-- end .sticky-header -->


    <div class="content">

        <div class="wrapper">

            <h1>&uarr; Sticky Header &uarr;</h1>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacus sem, semper quis malesuada nec, consequat sed sem. Aenean quis nulla sed urna luctus fermentum sit amet ut nisi. Donec felis lacus, dignissim commodo ullamcorper et, condimentum eu dolor. Phasellus fringilla magna nec turpis commodo, ac suscipit nulla imperdiet. Nulla vehicula consectetur magna in mollis. Mauris ultrices id dolor vitae volutpat. Pellentesque laoreet libero sit amet leo lobortis lobortis. Morbi sagittis malesuada metus quis blandit. Mauris tempor ultricies porta. Morbi sit amet enim vel justo porta scelerisque quis et nunc.
            </p>
            <p>
                Donec placerat quam nec ante euismod rhoncus. Sed pulvinar lacus a nulla molestie porttitor. In aliquet porttitor tellus molestie varius. Duis tellus neque, suscipit non aliquet a, viverra eu lacus. Nunc lobortis urna a eros laoreet, eu pellentesque enim commodo. Suspendisse pharetra luctus tincidunt. Quisque justo tellus, auctor eu tempor id, bibendum quis justo.
            </p>
            <p>
                Praesent porta, metus sed iaculis auctor, risus enim vestibulum eros, a dignissim dui metus at augue. Duis tortor sapien, posuere id ligula at, eleifend pretium eros. Maecenas vehicula magna nec ligula tincidunt dignissim. Maecenas et mattis eros, vitae accumsan nunc. Maecenas congue dui ultricies, rhoncus massa nec, lobortis purus. Vivamus lacinia, lectus at bibendum mollis, nisl neque vulputate dui, ac imperdiet tellus nisl vel est. Morbi lectus nibh, hendrerit nec blandit et, iaculis at leo. Nam ultricies scelerisque ligula, eu scelerisque lacus sollicitudin et. Duis vitae sollicitudin turpis, a tincidunt augue. Proin posuere enim eget luctus tempus. Nulla facilisi. Cras sit amet erat neque.
            </p>
                Vestibulum euismod eros at turpis pretium ullamcorper. Aenean sed lacus dapibus, porta tellus ut, scelerisque nisl. Nunc vulputate mollis consequat. Quisque in sollicitudin ipsum. Fusce et gravida tortor, sed iaculis sapien. Nam suscipit ligula dui, ac rutrum orci fringilla id. Phasellus pretium risus quis aliquam malesuada. Duis malesuada nec nunc vel rhoncus. Phasellus semper interdum felis, non pellentesque eros vulputate vel. Aliquam iaculis, est vitae pharetra semper, nisi est tristique nibh, viverra bibendum erat purus eu augue. Nullam dignissim viverra nibh quis dictum. Nunc ac ultricies orci, eget tincidunt massa. Ut molestie in felis nec molestie. Curabitur sit amet nibh sit amet sem euismod fermentum.
            <p>
                Donec et blandit turpis. Curabitur interdum gravida ullamcorper. Nullam scelerisque pretium consequat. Aenean ut euismod leo. Praesent placerat faucibus velit, sed tempus libero molestie non. Nam egestas sapien lectus, quis semper nisl fermentum eget. Ut luctus, eros nec interdum malesuada, mauris est feugiat lectus, vitae interdum metus turpis non justo.
            </p>

            <h1>&darr; Sticky Footer &darr;</h1>

        </div><!-- end .wrapper -->

    </div><!-- end .content -->


    <div class="sticky-footer">

        <div class="footerbg">

            <div class="wrapper">

                <p>Tutorial brought to you by <a href="http://tutorialbasement.com">TutorialBasement.com</a></p>

            </div><!-- end .wrapper -->

        </div><!-- end .footerbg -->

    </div><!-- end .sticky-footer -->

</body>
</html>

Step 2: Creating Some Basic Styles

Next we will create a new CSS document and name it styles.css. Place it in the same directory as our index.html. Then we will add some basic styles to our markup like body styles, link styles and our wrapper that centers everything.

/* Basic Styles */
*{margin:0;padding:0;}

body{
    background: #ccc;
    color:#333;
    margin:0;
    padding:0;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 2em;
}

a {
    text-decoration:none;
    color:#bb1716;
}
a:hover { color:#7b160e; }

.wrapper {
    width: 960px;
    margin: 0 auto;
}

Step 3: Creating the Sticky Header

Below the basic styles now we will add the necessary styles to our header area to make it sticky. We give it a position of fixed at 0px from the top of the page, and a high z-index of 999 so it is always in front of any content it goes over as we scroll down. We also have an unordered list in the header so I will apply some very basic styling to it as well such as remove the list styling and float the list items left so they are side by side.

/* Stick Header Styles */
.sticky-header {
    position: fixed;
    top: 0;
    z-index: 999;
    width:100%;
    background: #fff;
    border-bottom: 3px dashed #7b160e;
}

.navbg {
    width: 100%;
    padding: 5px 0;
    background: #191919;
    float:left;
}

.nav li { list-style: none; }

.nav li a {
    list-style: none;
    background: #bb1716;
    color: #fff;
    padding: 0 15px;
    margin: 10px 20px 10px 0px;
    line-height: 40px;
    float:left;
}
.nav li a:hover {background: #7b160e;}

Step 4: Styling the Content Area

Now that we have created the sticky header, you should of noticed if you opened index.html our header is now running over our content because of it’s fixed positioning. So now we need to add a margin to push the content down. I’ve also added a margin-bottom because we will run into the same issue with our sticky footer and I will be doing both examples on this index.html. While we do that I will also add some margins to our paragraphs and headers to clean it up.

/* Content Area Styles */
.content { margin-top: 120px; margin-bottom: 100px; }
.content p,
.content h1 {
    margin-bottom: 25px;
}

If you open index.html now, you will see we have created a sticky header and the content area now begins below it.


Step 5: Creating the Sticky Footer

The CSS needed for the sticky footer is very similar to the sticky header, only difference here is we will set the position to fixed and 0px from the bottom instead of the top.

/* Sticky Footer Styles */
.sticky-footer {
    position: fixed;
    bottom: 0;
    z-index: 999;
    width:100%;
    background: #fff;
    border-top: 3px dashed #7b160e;
}

.sticky-footer p {
    color: #fff;
}

.footerbg {
    width: 100%;
    padding: 10px 0;
    background: #191919;
}

If you open index.html now you can see we have created both the sticky header and sticky footer.


Step 6: Solving the WordPress Sticky Header Issue

If you are using this with a WordPress blog, you may notice while logged into your WordPress panel, the sticky admin bar is fixed on top of your sticky header. To solve this issue we will add an additional CSS class specifically for logged in WordPress users, basically saying if the user is logged in the admin bar is present so push the header down 28px, which is the height of the WordPress admin bar.

That being said add this class to your styles.css and the problem is solved:

body.admin-bar .sticky-header {top: 28px;}

Download View Live Demo


VN:F [1.9.22_1171]
Rating: 10.0/10 (4 votes cast)
How to Create a Sticky Header or Sticky Footer Using CSS, 10.0 out of 10 based on 4 ratings

Incoming search terms:

  • How to made header sticky through css (2)
  • #sticky_navigation_wrapper (1)
  • css3 sticky header (1)
  • header and footer class in css (1)
  • how to make a sticky header (1)
  • how to make a sticky wordpress footer (1)
  • howo to make sticky footer (1)
  • sticky header mean (1)