How To Create a Sticky Nav Bar with CSS

A quick usability tip

avex |

sticky nav bar

A Quick Tip on How to Create a Sticky Nav Bar

A sticky nav bar, or a fixed navigation bar on your website can help users get around much quicker. This can drastically enhance the user-experience, especially for websites that have a lot of scrolling. Normally, users need to scroll all the way back to the top of a website to get back 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?

Now, it should be said that there are some pros and cons to using a stick nav bar. Some pros would be usability and quick access. Cons would include the amount of space that is being used up by always having the sticky nav bar present.

Here is how you can add a sticky nav bar 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 nav bar 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 navigation is 22% faster to navigate. You can check out their article for more info on the sticky nav bar.

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

  • Nic

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

  • 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???

  • 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 😀

    • 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.

    • lastevns

      I am having the same issue, where the navbar is obscured, when scrolling, by certain images and text areas. Did you find any solution? I’d really appreciate some help.

      • Sophia

        I am not sure but try to give a biger z-index to the navigation. To make sure that it will be above all layers (texts, pictures etc.)

  • 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.


  • Works almost like a charm.. I’ve only added top:0; to the #navigation

  • P.S. is it wanted that this your webpage is wihtout CSS? I see it like in Firefox when you set view > page style > none

  • Cintia

    Not the best solution for when you have a lot of submenus. The menu doesnt scroll because its fixed therefore cant reach the submenus at the bottom. Hope this makes sense.