How to Make Your Site Navigation More Accessible by Adding a Sticky Menu

Sticky Menu Bar Navigation Graphic
Adding a sticky menu bar is an easy, user-friendly way to not make your customers have to scroll to the top of the page when navigating your website.

On a lot of websites nowadays, you will see a main navigation bar that stays fixed along the top of the browser window and then stays visible as you scroll down the page.  This feature is usually referred to as a sticky menu and it can be a convenient addition to your navigation design.

But it doesn’t have to be limited to just menu items.

With a little CSS and javascript, any important item that you would like to remain easily accessible can be added to this sticky position – like a company phone number, search bar or account login form.

Pros and Cons for using Sticky Menus – A Small Case Study

During a recent website redesign project for the Fountain Hills Chamber of Commerce one of their key requirements was to make it easier for site visitors to find and search the chamber’s business directory.

Implementing a sticky menu was part of our solution to achieve this by keeping a link to the business directory always available at the top of the screen.  During development we provided two test links, one that used a sticky menu and one that did not.

We provided those links to a four-person website review team and of that group, three of the four members said that they preferred using the sticky menu because they were able to access the business directory link much faster without having to scroll to the top of the page.

On the flip side, the one user who preferred the test site without the sticky menu said that the sticky navigation was distracting and didn’t like that it took up screen space when reading the longer articles on the site.

Sticky Menu Created for Fountain Hills Chamber of Commerce
A small website review case study showed that 3 out of 4 people preferred a sticky menu.

See Live Sticky Menu

The CSS Code

At its most basic core, a sticky menu can be added with just (2) CSS elements: position and z-index.

#mynavigation {
   position: fixed;
   z-index: 4;

Setting your menu’s navigation div position to fixed will keep it from scrolling with the rest of the page and adding a z-index will ensure the div sits on top of all other page elements.

You will likely also want to adjust your body content to allow for margin room for the menu.

#content {
   margin-top: 75px;

A JavaScript Approach

For those who prefer working with javascript frameworks such as bootstrap and jquery, below are links to additional tutorials for adding a more advanced sticky menu using javascript.  These enhancements include additional functionality like adding animation and easing movements to your sticky menu as well as optimizing your sticky menu for mobile devices.

Improving the Old HTML Frameset

When I see sticky menus I can’t help but think back to the old days of the web when many sites were built using HTML framesets. The concept about keeping the navigation always visible is the same but today’s sticky menus drastically improve that old technique by also allowing for better security, cross-browser compatibility and search engine optimization.