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