As an amateur web designer I've been paying close attention to websites' designs to improve my grasp on this field, I noticed that some websites are using sticky navigation bars while others are using non-sticky ones (such as SE). So, I've been wondering, why are they choosing one option instead of another?

What are the basis of choosing a sticky navigation bar anyway? Is it the page's length(longer pages need a "return point")? Or perhaps it's based on application's type (web apps need sticky navbars to look more app-y)? Or maybe it's just designer's personal preference?

P.S.: I've seen websites using both sticky navbars and non-sticky ones, such as SE chain and Twitter.com, and indeed both of them are well-made. So I really don't think there's a bad design choice here.

  • As a user, I'm not a fan. I don't like the idea of parts of the web page "following" me around. At most I'll tolerate a "back to top" button and even then I can always just press Home on the keyboard. Maybe I'm in the minority, maybe not. Commented Aug 27, 2013 at 22:15
  • Just a thought, I think sticky navbars are a no brainer when you have a website with infinite scrolling
    – bpromas
    Commented Oct 6, 2015 at 18:12
  • This is why headroom.js is awesome: wicky.nillia.ms/headroom.js Commented Oct 6, 2015 at 20:02

4 Answers 4


The decision to use sticky navigation should be based on the primary activities of the user. If the user is likely to use the navigation quite a bit then it may make sense to accept some of the tradeoffs mentioned by @obelia.

With SE, for instance, the primary activity might be to read and respond to questions. Most of that happens within the context of a scrolling page. That is: read question, read comments/answers, add comment or answer. A case could be made to have a link to the homepage (to see additional questions), search (to find answers), and Ask Question, as these may also be primary activities. Whereas, I would suggest, the other options in the header are may not be primary activities.


A sticky bar has the advantage of always being visible. It has the disadvantage of always taking up part of the viewport and leaving less area for the content. This isn't much of an issue on a large desktop screen, but on a smaller phone screen can be problematic.

Another disadvantage of a sticky bar on the top is that when one pages down, the reduced effective viewport is not accounted for so it effectively scrolls a little too much, more than a visible page's worth - there's a sliver of content jumps from just below the viewport bottom to just above the (reduced) viewport top. This is problem exacerbated by a large sticky header. You probably notice most sites that have a sticky header have a small one, and this presents it's own design constraints that aren't acceptable in many cases.

There's always tradeoffs.


Frankly, I think the question you should be asking is when NOT to use a sticky nav bar.

As long as the site or app you're working on has multiple sections that users frequently navigate between--even single page web sites often do--providing users with persistent shortcuts is definitely good for usability.

Yes, this even and especially applies to mobile devices, where it's easy to become disoriented on long-scrolling pages or in content-rich apps.

Consider, for instance, that the android phone I'm using to write this post has a sticky nav built in to the OS. My old phone had one built into the hardware, and the prominent design feature of the face of the iPhone is its home button--the number one navigation destination for users.

As a user, I'll take the screen space hit all day to have those most common nav buttons close at hand.


Use them whenever they don't obscure your content and when they provide improved usability. Sites with long pages (lots of content) on desktops kind of need a sticky menu. It might take too long to scroll back to it. However, on mobile devices a touch scroll with momentum can take you to the top quite fast. I've found that the fully sticky navigation is a pain on mobiles. What would be best, is to make it work like Chrome's URL bar on Android. It's sticky, but if you scroll down it hides. If you scroll back up a little (indicating that you might want to go to the top), it slides in. So it's sticky and non-sticky at the same time, I think it's brilliant. One "just" needs to code that for their sticky menus on mobile.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.