Menu Search
Jump to the content X

navigation usability Sticky Menus Are Quicker To Navigate


Most designers would agree that navigation is one of the most critical components of a website. Despite this, it is not always easy to use or access. Traditionally, users must scroll back to the top of the website to access the navigation menu. I recently wondered whether sticky menus makes websites quicker to navigate, and I conducted a usability study to find the answer. Let’s look at the results of the study, a few implementation techniques and some related challenges.

Sticky Navigation Sign1

Sticky, or fixed, navigation is basically a website menu that is locked into place so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll. Although sticky navigation can be applied to any menu, such as the footer or social media buttons, we’ll focus on the main (or primary) navigation of a website. The image below shows the difference between standard and sticky navigation on a mobile device.

Standard Vs Sticky Navigation2


Usability Study Link

Research Conditions Link

For the study, I created two test websites that were nearly identical. The only difference was that one of them had standard navigation and the other had sticky navigation. Forty participants were timed in completing five tasks on the first website. Then they were asked to complete five different tasks on the second website. The order of the tasks was alternated between users to balance out the familiarity factor. The websites were tested on desktop machines, and participants were not told the differences between the websites until the end of their session. Data was not analyzed until the testing was completed. The results of the study yielded two interesting conclusions.

1. Sticky Menus Are 22% Quicker to Navigate Link

The data from the study indicated that participants were able to find what they were looking for quicker when they didn’t have to scroll back to the top of the page. 22% might not seem like a big number, but it can have a big impact on visitors. According to this data, sticky navigation could cut 36 seconds off of a five-minute visit to a website. Of course, keeping visitors on the page longer is only a benefit if you are enhancing the user experience along with it. Forcing people to dig through a website to find something does not qualify as such.

2. 100% Preferred Sticky Menus Without Knowing Why Link

At the end of each session, users were asked whether they noticed the difference between the two user interfaces. No one was able to identify it. The changes were subtle, and none of the users caught on because they were focused on completing their tasks. Participants were then asked whether one of the websites felt easier to use. Six of the 40 participants had no preference, but of the 34 that did have a preference, 100% of them indicated that the website with the sticky navigation was easier or faster to use. Many comments along this line were made, such as “I don’t know how the websites were different, but I felt like I was spending a lot less time clicking with the first one.” Such comments indicated overwhelming favor for the sticky navigation.

Desktop Software Navigation Menus Link

Imagine typing a document in Microsoft Word and having to scroll up to the top of the first page every time you wanted to bold a word or widen the margins. Just the thought of that sounds frustrating. Most desktop software provides access to the entire navigation menu no matter what you are doing in the application. The Web browser is no different; we would find it ridiculous to have to scroll to the top of a website to access the address bar of a browser.

Some Good Examples Link

Facebook and Google+ recently adopted sticky navigation, but they are among the minority. Of the 25 most visited websites in the US3, only 16% currently have sticky navigation. Below are some examples of other websites that do an excellent job of pulling this off.

Fizzy Software4
This is a perfect example of horizontal sticky navigation at the very top. Everything feels comfortable while you’re using the website.

Fizzy Software Navigation5

Web Appers6
The navigation here is vertical and on the left, somewhat resembling Google+’s navigation. The only downside here is that if the screen’s height is shorter than 560 pixels, then the bottom portion of the menu could become inaccessible, which was the case when I tested the website on a netbook.

Web Appers Navigation7

Here is another great example. Making the navigation slightly transparent, giving a hint of the content beneath it, is a nice touch.

Make Better Apps Navigation9

Rodolphe Celestin10
This sticky navigation spreads all the way across the top, but when you scroll down the page, the design of the menu changes slightly. Simplifying the design like this can be a good technique, as long as it doesn’t feel inconsistent. Also, the designer has taken an increasingly popular approach by making the entire website just one page; the menu links are anchors that bump you down the page. Some nice transitions and hover effects make this website enjoyable to use.

Rodolphe Celestin Navigation11

Ryan Scherf12
The navigation on this website is vertical and only icons. The creativity here is impressive.

Ryan Scherf Navigation13

Web Designer Wall14
The sticky vertical navigation works well on this website because the menu has only four items. This works well enough for blogs that I wonder why others don’t adopt this approach.

Web Designer Wall Navigation15

While sticky menus aren’t the most popular form of navigation, more and more examples16 are popping up all the time.

Getting Started Link

Avoid iFrames Link

This might seem like a straightforward way to implement sticky navigation, but avoid this method. iFrames cause more problems than they solve, particularly with cross-browser compatibility, security and search engine optimization. iFrames have their place, but they shouldn’t be a major part of your HTML layout.

CSS Link

CSS is a great way to implement sticky navigation. It also seems to be the most straightforward, most lightweight and quickest to code. The three things to pay attention to are position, margin-top and z-index. Setting the menu’s position to fixed disables the element from scrolling with the rest of the page. This will likely throw off your margins if your navigation is horizontal, so you’ll want to adjust for that. Finally, use z-index with a horizontal menu to make sure the navigation sits on top of everything; this will make the other content slide underneath the navigation as you scroll. Here is the general idea:

#navigation {
   position: fixed;
   z-index: 10;

#header {
   margin-top: 50px;

You will have to play around with the CSS to make this technique work right for your website. Additional information can be found on the W3C’s website17.

jQuery and JavaScript Link

Smart Sticky Bar Navigation18
The Simple Smart Sticky Navigation Bar is one of many good JavaScript implementations.

If you would prefer a jQuery or JavaScript solution to a CSS one, then you could try out one of the following options:

Many other solutions and scripts are out there. Please include your favorites in the comments below.

What’s The Bad News? Link

Give Me The Bad News23

There are many opinions24 on this topic, and some would argue that sticky navigation isn’t worth it. Here are some things to be aware of.

Design Limitations Link

Going with sticky navigation could rule out some design choices that your team might not be willing to give up. For example, the most logical place for horizontal sticky navigation would be at the very top of the page, above everything else. While easy to implement, it might not be what your users need.

Distracting and Intrusive Link

If not done carefully, sticky navigation can be distracting. Some sticky elements get delayed when bouncing back into position as the user scrolls down the page. Others are so tall or wide that they dominate the layout and impede access to the content. Navigation should be easily accessible but should not compete with the content for attention.

Mobile Compatibility Link

Fixed-position CSS and certain JavaScript implementations lack support in some mobile browsers, which is a cause for concern among some developers. The article “Organizing Mobile25” by Luke Wroblewski has some great principles to keep in mind when creating navigation for mobile devices. Responsive design techniques also offer some solutions26 for adjusting the navigation based on the size of the screen.

Be aware of the level of support offered by each device. Knowing compatibility issues beforehand will save you time in the end. When Can I Use?27 has some interesting information on support for position: fixed. Brad Frost has also done some of his own testing and analysis28, providing some interesting insight in his accompanying video29.

Conclusion Link

Why do we Web designers and developers continually force our users to scroll up and down the page in search of the navigation? This is not a problem in desktop software, and we now have the statistics to show the benefits of sticky menus. Navigation on 84% of the top 25 most visited US websites30 could be made quicker by implementing sticky navigation.

Of course, it’s not appropriate in every situation, especially when real estate is tight. But do seriously consider sticky navigation, while always accounting for usability and the overall user experience.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30

↑ Back to top Tweet itShare on Facebook

  1. 1

    Was great to see some statistical data surrounding sticky navigation. I have somewhat recently begun to use it in a number of my projects and really feel most of them benefit from a UX perspective as well as a design perspective. I think this will function and look even better as some browsers start to lose the chrome at the top of the page (particularly in mobile/tablet spaces); the site navigation then becomes to top bar of the page.

    I do, however, often disable it in mobile browsers via media query due to some issues with the position:fixed not really translating well, particularly in iOS (it gets super jumpy when scrolling; thank you, Apple). There are some fixes for this, but none have seemed worth it for my projects.

  2. 2

    Very interesting article! I always wondered why the sticky nav was never used more often. Obviously as you pointed out, it can become annoying when things start following you down a page. But if done unobtrusively, I think it could be a great tool, especially for longer pages.

    The only downfall is when it becomes popular, and marketing departments start to say things like “Let’s have the ads follow the user, it’ll increase conversion!” :|

  3. 3

    Great article, Hyrum! Sticky menus are becoming a fairly popular trend on the web. I appreciate your usability points and tips you made about them. This was something I really wanted to do on my website, but keep with the idea/trend of not having it start at the top. I think its great in single page sites or ones that have quite a bit of scrolling. Take a look at mine if you’d like (I’m interested to hear what you think): – Again, thanks for sharing this with us!

  4. 4

    Dear Smashing Magazine, implement this! haha

  5. 5

    Thanks a lot for mentioning Fizzy Software. Always been a big fan of Smashing Magazine and feel great to be recognized for the small things.

    The stats are def interesting and will be recommending it to all future clients and internal projects (if it seems suitable).

  6. 6

    Michaël van Oosten

    September 11, 2012 5:43 am

    Thanks for your article. I wonder; have you done any research on mobile devices as well?

    • 7

      I have not done any research of this type yet for mobile devices although that would be a great next step. I imagine there is a whole world of data to uncover with those devices and users.

      • 8

        As per above comment, position:fixed is badly implemented in iOS devices and many android/other devices as well. The reason fo this is that it is much more process heavy on a browser. The processor is forced to redraw every frame on scroll. However, most native apps do feature that function.

  7. 9

    That’s why we add “top of page” link underneath.

  8. 10

    Well that’s exactly (no: allmost) what we were doing years ago using the -technology in the late 1990s/early 2000 to make the navigation sticky. ;-)

  9. 11

    100% agreed

  10. 12

    Thanks for the useful post and research!
    Drawing conclusions from the research, as described, is problematic. Quite naturally, people complete tasks faster second time around, whether you’re comparing sticky vs. regular menu, or the same site exactly. To truly test the validity of your claims regarding speed, you’d have to test two groups of similar people, both using the site in the same situation+experience (first time / after some use / prolonged use).

    • 13

      I completely agree and what you described is how I preformed the study. First time users of the sticky navigation completed their tasks 24% faster than standard first time users. Second time sticky users performed their tasks 19% quicker than second time standard users. The two averaged together resulted in the 22%. So, my test did include multiple groups of similar people who all performed their test on the same website (except location and attachment of navigation) and I tracked first and second time users separately. I can see how the article could have went into more depth about this so sorry for the confusion. Thanks for keeping me honest in my conclusions though.

      • 14

        Did you publish the numbers and the analysis somewhere?
        I would be interested to read the full analysis.

        • 15

          I agree on this one. Using your article as literature for an essay of mine, and it would be interesting to read the whole analysis.

      • 16

        How do sticky vs. non-sticky menus affect bounce rates? That’s the clincher.

        I personally hate sticky menus on content sites because they often carry ads and non-navigational content — they seem to “stalk” more than “follow” me, intruding upon my reading experience. I associate persistent menu bars with “work” oriented application controls. So while the faster navigation experience stats are impressive, the aesthetic and experiential compromises (in addition to the other drawbacks mentioned in the article) make me wonder when/if/how sticky menus are most appropriate.

        For WordPress users who want a sticky nav menu, I would suggest altering the existing WP sticky admin menu so it can show the main nav options and social media links (etc) to all users as well as a pared down selection of the essential admin links for logged in users. With WP’s sticky admin panel, it’s a bad idea to add a separate sticky nav menu without turning off the admin panel or else move one of them to the bottom of the screen.

  11. 17

    An EXCELLENT example of non intrusive and well designed sticky navigation can be found at the website of Rule Of Three Copywriters:

    Go check it!

    • 18

      I like the use of the sticky menu on that site alot, however, when using my netbook to view it I had to scroll back up a couple of times before I got use to the speed the website was unfolding at. I kept loosing the top of the page. But once I calmed the mouse wheel action down I liked how the menu blended in with the overall theme and style of the website and I can almost say became invisible until I wanted to use it.

    • 19

      The sticky menu use is great on that site! However, I am not really a fan of the single page scroll on a business-centered site. That is however, just my opinion. Many may love it.

  12. 20

    Yes! I have been arguing for sticky menus for a while. I think especially for smaller screen sizes. It is not hard to add a media query to fix the menu for smaller screen sizes. The only issue I have seen is that fixed positioning does not work on some devices, but there are work arounds.

  13. 21

    Interesting article. I was never much in favor of sticky navigation since you lose screen size with it, certainly on mobile devices. (but I think it will be even more useful on a mobile device, since desktop users kan easily hit the “home” button on the keyboard, but mobile users really have to scroll up completely)

    It would be great to design a really condensed but still usable sticky nav, so you get the best of both worlds.

    An excellent example of well designed sticky navigation can be found at “Rule of Three Copywriters”

  14. 22

    Interesting article. I was never much in favor of sticky navigation since you lose screen size with it, certainly on mobile devices. (but I think it will be even more useful on a mobile device, since desktop users can easily hit the “home” button on the keyboard, but mobile users really have to scroll up completely)

    It would be great to design a really condensed but still usable sticky nav, so you get the best of both worlds.

    An excellent example of well designed sticky navigation can be found at “Rule of Three Copywriters”

  15. 23

    Very good article – I’ve been looking at implementing sticky navigation more and more recently, where appropriate. In a CMS I designed recently we implemented it after user testing showed several participants struggled to complete some of the tasks without it. The default Twitter Bootstrap examples also use it.

  16. 24

    Just implemented a sticky banner on a one-page site. It works really well for keeping the focus of the site working whilst not being too intrusive. Definitely see this as being the ‘way forward’.

  17. 25

    Regarding your comparison with the desktop software – i will only mention that in web design the top is also used by browser interface , this resulting in less space for content. Anyway, there is place for everybody and especially the examples with the vertical menu seems more practical. An horizontal menu should therefore be more careful approached with this techniques. Indeed “Real Estate” is important sometimes :) Good article !

  18. 26

    Interesting stuff. Thanks

  19. 27

    ^same here. although this sticky navigation could be a personal preference too. But all in all I like the idea that you guys took the time to really test it.

  20. 28

    Great article!

    I agree with it 100%. Although sticky navigation will be a little bit tricky, but it will improve the usability of the website.

  21. 29

    For me most pages with sticky navigation is exactly distractin and intrusive.

  22. 30

    You might have a look at twitter bootstrap frame work. It allows for a fixed menu. It is also responsive. So if user is viewing from a desktop all menu items are visible. If viewing from a phone the menu is collapsed and a menu icon allows user to toggle menu.

    See this link for example

  23. 31

    I love sticky menus. Imho the biggest issue is the lack of support on iOS Safari version 3.2 – 4.3… We cannot just ignore it… suggested workaround?

  24. 32

    Decided to go with this in the next iteration of my portfolio website, so it’s good to see evidence backing up my instincts on whats good.

  25. 33

    Ever since I started noticing sticky navigation I’ve thought it has been an improvement to usability. With the ability to scroll being so easy now with mouse wheels users are no longer sticking to the top of the page. Long pages can become cumbersome to navigate away from so solving this issue seems like a no brainer: make the navigation follow the user. It’s like constantly having a remote strapped to your hand.

    The only problems I see is when navigation is pushed far up in the hierarchy. It should be very subtle. If you have several sub navigations you should probably only include the main one in the sticky part of the navigation. Users want to be able to go to other pages quickly but don’t like their screen being cut by 1/3rd because the navigation is so dense.

    I’ve also seen social share bars done this way, which I disagree with strongly. Sharing should be strategically placed on the page to be available only when the user is most likely to share something (usually at the end of a post or after they’ve bought something.).

    Great article! I especially like the webappers example, it’s very consistent with the design.

  26. 34

    Awesome study and summary. I was still very skeptical until I got to the bad news, which was summarized very well – I’ve always found sticky menus hateful because they nearly always noticeably impede reading or using the content I’m actually trying to access, and it takes a very disciplined approach to design to create navigation that doesn’t take up a significant amount of space. Maybe in action-heavy applications (as opposed to content-heavy reading sites) sticky nav is worth another look.

    • 35

      This design trend is definitely on the rise. Just take a look at LinkedIn or TechCrunch. Clearly there is a benefit to giving our users an option to always be able to navigate easily without having to scroll all the way up. This is not a break-through though. Most native desktop software, especially function-oriented ones features this function (just take a look at your browser). But I do agree that it does get bad sometimes, some of the worst cases is Microsoft Word series, that never fail to amuse me in the complexity and the size of their top nav.

      What I believe is happening in terms of innovation, however, is that these top nav bars are now beginning to react to actual user page/scroll location. They are not there to obstruct the splash picture when the user are at the very top but they are reviled once the user scrolls. There is a good example posted in the comment above. Another approach is on which gives only a slim slither at the top (priming the user for that option) with the most basic stuff and expands down to outline further navigation once the user scrolls down. Pardon for being a bit biased with this example choice, but I do like to speak from my own experience.

  27. 36

    > the most logical place for horizontal sticky navigation would be at the very top of the page, above everything else.

    Not strictly true. With a little JavaScript, you can have your menu wherever you like it and only “stick” it to the top of the browser once the user scrolls beyond it. I recently did the CSS/HTML for a site ( with a sticky top menu that does exactly this, and also catches the left navigation on certain long pages as well (People section best example). It’s not 100% pixel perfect if you are trying to catch it out, but no real users will spot it.

  28. 37

    This is a little different, but could also work for menus:

    .sticky {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    top: 15px;

    Of course, this is far from being a totally accepted standard, but one can only hope browsers will pick it up soon! :-)


    • 38

      I noticed on several menu items including “search” disappear for the fixed nav. This seems like an issue to me.

  29. 39

    This is a good issue to bring up. I didn’t really appreciate the sticky navigation until I became a netflix user. When jumping between Netflix and IMDB I find myself getting frustrated having to ‘scroll back up’ on IMDB to search again. While it’s not ideal for all sites or designs, most sites that heavily rely on searching or category breakdowns could really benefit from it.

  30. 40

    What a coincidence, I’m already working on my one page responsive portfolio which also has a custom made sticky navigation (at the top). I always try it out on my mobile phone before I upload it and sometimes the sticky footer is intrusive because you may want a full screen experience. To solve this problem I made a close button, so users can decide if they want the sticky navigation or not. If they want the navigation back, they just have to go to the top of the page again. I’m not sure but I don’t know any website who has a close button if you find the navigation intrusive on your experience.

    • 41

      Could be a good idea. In a way I imagine it to function like twitter notifications, or something that HelloBar is doing, with exception of it being navigation instead of notification.


↑ Back to top