How To Create a Sticky Nav Bar with CSS

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.