Creating Fixed Headers with CSS





CSS Fixed Header Tutorial

This well thought out, easy to understand CSS3 video tutorial will show you how to create a fixed header with CSS.

The goal here is to make a header that stays fixed to the top of the screen, whether you are scrolling or not. It’s a great option to have in your coding arsenal for clients who want to have a website that features fast and easy access to navigation, or perhaps just want to draw attention to a promotion with an eye-catching banner ad. Either way, this lesson will show you how to set up both a full-width header and one that matches up with custom width pages.

He begins with a basic web page that has a set width and a small header that matches the width set up at the top of the page. so we just need to make that header follow us as we scroll down the page. Here is what the code looks like in the beginning.

<head>
<style type="text/css">
body{
    margin:0px;
    background:#000;
}
.header {
    height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
}
.content {
    width:960px;
    background: #F0F0F0;
    border: 1px solid #CCC;
    height: 2000px;
    margin: 20px auto;
}
</style>
</head>
<body>

    <div></div>

    <div></div>

Start by changing the header position to fixed; and the width to 100%;. After this the content margin is set to 70px auto;, which adds a total of 50pixels. This results in the header remaining at the to of the scree even when you scroll down, but it is not positioned at the top of the screen like many people would like. So adding the property top:0px; to the header will push that header to the top of the browser window.

Now if you prefer to have a header that matches the width of the content, then there is still a little work to get done here. Changing the header width to 960px; will create the proper size, but it still needs to be positioned correctly. To do this, we add a property of margin: 0px auto; to the header and then create a new class .header-cont { width:100%; position:fixed; top:0px; }. This then wraps the header division to apply the two classes to it. You can also now remove the top: and position: properties from the header.

<style type="text/css">
body{
    margin:0px;
    background:#000;
}
.header-cont {
    width:100%;
    position:fixed;
    top:0px;
}
.header {
    height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
}
.content {
    width:960px;
    background: #F0F0F0;
    border: 1px solid #CCC;
    height: 2000px;
    margin: 70px auto;
}
</style>
</head>
<body>

<div class="header-cont">
    <div></div>
</div>

<div></div>

We hope you have enjoyed the tutorial and encourage you to send in requests for future tutorial topics. And before you hurry off, you may find this recent post on how to use Division, IDs and Classes to further organize your projects. Thanks for stopping by!

29 thoughts on “Creating Fixed Headers with CSSadd yours
  1. Pingback: Creating a Two Column Fixed Width CSS Layout

  2. Raihan Taher said: #

    Thanks.. It helped me in my bad time.

    • Nahla said: #

      Thank You alot, it’s help me too :)

  3. august said: #

    first thank you for this wonderful tutorial, i’ve just a little problem.. i do have a jquery slide show of photos and the only problem is that when i scroll the slideshow overlaps the header.. what could i possibly do to make the slide show apper behind the header..thank you and hoping for your response..

  4. Simranjeet Singh said: #

    You are Great Thanks………..Very very much

  5. Juli said: #

    is it possible to make header be fixed just for some scrolling? for example scroll until 30 mm and than left stick.
    and is it possible to be fixed just for particular page?

  6. wilson said: #

    smashing! just what I was looking for. thanks!

  7. Felix said: #

    Thanks so much! This made my day… no wait, my whole week :D
    Always had this in mind, but did not achieve to code it properly.

  8. Kishan said: #

    Thks a ton for th tutorial..:)

  9. Vishmay Patel said: #

    Really nice tutorial. I read a question on Stackoverflow having same query and I am referring your tutorial to him.

  10. virendra said: #

    it works fine. great.

  11. Nuwan said: #

    Thanx bro….It helped lot…

  12. Enrique J Anaya sierra said: #

    Beautiful way to teach!

  13. silva said: #

    What’s your editor, man?

  14. Cristi said: #

    Dear Chris,
    Your solution is simple and elegantly effective, I can’t tell you how much I appreciated it…
    A real gift for anyone looking for a working solution for fixed headers implementation, based solely on CSS.
    BTW, it works for fixed footers as well ;)
    Sincerest thanks!
    Cristi

  15. Hiranya Garbh said: #

    In my website everything is great ..the header is according to what I needed it to be… But when is scroll down the content of header and the content of the body overlaps each other (i.e. – Comes upon one another)… Pls Help me!

  16. Pascal said: #

    Thank you! Very good tutorial!

  17. Jiten said: #

    in my case the header became fixed, but the menus and search button i kept inside the header div came outside of the div(downside). whats the problem?

  18. BKA said: #

    Do coders just not know how to teach, or are they afraid of losing that superiority? No one actually teaches this stuff. They just say “Do this”, but don’t explain why, or where, or how.

  19. muhammad daqqa said: #

    Thanks a lot for your helping

  20. Ana said: #

    Thanks so much! Couldn’t find information on this anywhere and I’m brand new to CSS. It helped me to understand the concept much more as well.

  21. Juan Beras said: #

    Hi Chris, is there anyway to have the header change as I scroll down. Like for example, once I start scrolling down, and I reach a certain point in my content, I would like the header to change. Please take a look at my project here: http://2facced.com/marcecko/

  22. mishu said: #

    Hi,
    How can u make a header like this that is initially at let’s say 70px and after you scroll down the page it stays at 0px and works like the one in your example?
    something like this: http://elitedaily.com/

  23. mishu said: #

    that was 70px from top :)
    thanks

Leave a reply
this will never be published
@