You are viewing this site in staging mode. Click in this bar to return to normal site.

How to Streamline your Site Navigation with a 'Sticky Nav'

Sam O'Reilly
16 October 2017 10:52

What is Sticky Navigation?

Standard navigation menus are limited by disappearing when a user scrolls down your website. Sticky navigation is 'Sticky' or ‘Fixed’ navigation where a website menu is locked into place so that it is still accessible even when the user scrolls

Sticky navigation is a separate feature on a web page, where a conventional navigation menu is a static part of the site, usually located in the top left of the page. Sticky navigation floats over the content so that the navigation will hold its position, making it easier to access.

Sticky navigation can be compared to some desktop apps like Microsoft Word where all the text formatting options are fixed. It would get frustrating having to scroll all the way up to the first page every time you want to change something when writing a long document.

Advantages + 

  • The main advantage of using sticky navigation is that it makes browsing a website easier by removing the need to scroll up to get back to the navigation menu. This is proven by its use in many huge and popular websites like Facebook and Twitter.
  • Sticky navigation can show a clearer view of where a user is when they are when browsing a website.

Disadvantages -

  • Using a sticky navigation on a website takes up space that could be used to display more content. The navigation can also momentarily block content that users are trying to consume and it could be distracting or frustrating for them.
  • They aren’t compatible with some mobile web browsers.

There's some research from Smashing Magazine that shows how people react to sticky navigation. The research consisted of creating two almost identical websites where the one key difference between them was that one used a sticky navigation where the other used conventional navigation. 40 people were timed in completing 5 tasks on the first website and then 5 tasks on the second. 

The results showed;

  • Sticky menus are 22% quicker to navigate
  • 100% of participants preferred sticky menus (without knowing why)

Why and when to use 'sticky navigation'?

Many people have a psychological need to feel “in control” when browsing through a website, a sticky navigation can help to provide it for them. - Wired Innovation Insights. When used together with breadcrumbs, sticky navigation lets users keep track of where they are on a website and increases their sense of control. 

To know when to use sticky navigation, it depends on what a website needs. If it contains many pages that need to be navigated through frequently, then a sticky navigation would be good to add. If the website is more targeted towards mobile users, using a sticky navigation might be a bad decision as they’re not compatible with some mobile browsers. 

Enabling a 'sticky navigation' with KhooSeller

Within KhooSeller, adding a sticky navigation is made simple through design shortcuts. Simply speak to your designer at the time of building your site, or get in touch with the team to enable this.

To see this in action, we've recently added a Sticky navigation to an KhooSeller website, COGO:

If you'd like further information about how to streamline your website navigation, or to implement a 'sticky nav', do not hesitate to get in touch with the KhooSeller team.