Sticky Nav Bar with CSS

Sticky Nav Bar with CSS

A quick tip for creating a sticky nav bar

A sticky nav bar, or a fixed navigation bar on your website can help users get around much quicker. Normally, users need to scroll all the way back to the top of a website to get to the main navigation. Being that the navigation is one of the most important elements of the website, why shouldn’t we make it more accessible?

Here is how you can add a sticky nav to your website using a little CSS. You may need to adjust it to fit your design, but with a few tweaks it shouldn’t be difficult at all. I just implemented a sticky nav bar on my website. It only took a few mins, and it looks pretty awesome.

The navigation will be “fixed” to the top of the browser window. Making the navigation readily accessible. A very useful tool.

#navigation {
   position: fixed;
   z-index: 10;
}

#header {
   margin-top: 50px;
}

Smashing Magazine did a usability study and found that a sticky nav bar is 22% faster to navigate. You can check out their article for more info on sticky nav bars.

Let me know if you have any questions in the comments below.

Sign up for the monthly newsletter.

Written by avexdesigns

John Surdakowski is a web designer and developer currently living in New York. He loves experimenting with new styles and techniques both in web and mobile. John has a Twitter account where he posts random things. You should follow him. @avexdesign - Also, check out John on Instagram and Google+

12 Responses

  • Nic

    This is fab && just what i needed, Thank You!!

    • http://www.avexdesigns.com John Surdakowski

      Awesome! Glad it helped.

  • Rishabh

    well, this is just great and simple as compared to other tuts , i wanted to know that how do i fix the nav div horizontally???
    thanks

  • http://www.celticwebdesign.net/ Darren Stevens

    Super simple solution, had tried to integrate jQuery Sticky Nav, but found problems with responsive web design.
    Great solution, thanks for posting this.

  • Raghavendran

    Thanks a lot to give the simple solution for sticky nav bar

  • Adrian

    You won the internet! Thanks for that helpful article, it solved 2 problems I had with my website at once :D

    • avexdesigns

      You’re very welcome

  • Pingback: CSS Technique: Sticky Nav | Thinking Futurely()

  • gembel

    best tutorial! terima kasih

  • Virginia

    Okay, I need to go back and look at my code, but when I tried this the content of the page when scrolling went over the bar, rather then under. It may be because I was adding a dropdown menu, or because of the way I used float for the content. Going to research z-index so I understand it.

  • timeforfunstuff

    Whenever I use this solution my bar sticks to the top and refuses to scroll with the page, because I design with fluid grids. I think my only solution is jquery

  • Jerry

    Any tips as to getting this to work on Safari? I use your same code and it works perfectly in Chrome, Firefox, and Opera, but doesn’t do a thing in Safari 7 in OSX. In the Yosemite beta Safari, the nav does remain fixed, kind of, but it also bounces around and does strange things.

    Any ideas? Your nav bar works fine in Safari. I’ve looked at your source but cannot pinpoint the reason yours behaves as expected.

    Thanks!