When should we have a fixed top bar?

The StackExchange™ MultiCollider SuperDropdown™ isn't fixed, as it scrolls with the page, while Facebook's top bar is, because it stays on screen no matter how you scroll.

What decides whether a top bar should be fixed?

  • 2
    Personal opinion: never, 'cause I can't hit "page-down" to read more. It becomes "page-down, up, up, up"...
    – Izkata
    Commented Mar 31, 2014 at 20:13
  • 1
    Another option I've seen a few times is a bar that disappears when you scroll down, but reappears whenever you scroll upwards (even if you're still very far down from the top of the page). Commented Apr 2, 2014 at 5:41

4 Answers 4


Simple answer: When you want that information/functionality to be visible/accessible at all times and the page has a long scrolling content.

Screen space is a resource to be used wisely. One, because usually you have more information than can fit in one screen, and, two, everything that is on the screen imposes a cognitive load on the user. So you just have to weight gains/costs of every feature you put on the screen.

We want users to feel good and be productive whenever using our products/software/apps. So we try to make it easy for them. Does the fixed bar make their work more productive/easier? Or just use up screen space by presenting logo and some unnecessary links/functions user is not very likely to use?

Some cases, when fixed bar is a good idea:

  • The page is vertically long and user might want to quickly access top menu without having to scroll all the way up (or looking for Home key on the keyboard, which I think very few users use to return to the top).
  • User needs to see some information at all times wherever they are on the page (like incoming messages, alerts etc, or table column headers when the table is very long etc.).

Fixed/Floating header: It always shows navigation no matter what height a page has. As a social engaging site, FB always wants users to engage with deep ocean of information and a quick cue to return any time from any location

It also help user in terms of usability,accessibility and aesthetically.

SO site doesn't have it but they might incorporate it in future, however if you notice they add small notification[something like (2) ] when there is a new question/answer to your question on the header of your browser.

You can read more here :http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/

  • Like @Hem said, sticky menus are most useful on websites which have really long pages. Without it a user will have to scroll all the way up again.
    – nuwa
    Commented Mar 31, 2014 at 14:00
  • SO also has a floating header on review queue items, so that you can scroll down to review an entire post, and hit accept/reject/etc. without scrolling back up.
    – Brian S
    Commented Mar 31, 2014 at 18:08
  • How does it help in terms of accessibility?
    – JonW
    Commented Apr 1, 2014 at 5:56
  • Navigation items on the headers are key points of your application and by using sticky header they will always be accessible to user no matter which location he is. Hence it enhance accessibility.
    – UXbychoice
    Commented Apr 1, 2014 at 7:00
  • Have you run any tests on real users to verify this claim? Pardon my skepticism. Commented Jun 5, 2014 at 20:27

What decides whether a top bar should be fixed?

Three considerations which are important.

  • How tall will the bar be? A stationary bar which is only 20 pixels high is much less likely to be bothersome than one which is 200 high - regardless of what is shown on it or whether it's useful. Many users have smaller resolution screens than developers, this causes a large bar to be bad UX for anyone on say a 1280x800 laptop.
  • What does it do and what are your users use cases? I am going to add that you should consider use cases for what people on the site are going to do. This can help guide whether you want a fixed bar or not, too. For example:
    • On news sites, likely to read new articles - this is why you see suggested articles/etc at the bottom of many news stories
    • On informational pages, users reaching the bottom probably are going to have some questions/etc - this is why help, contact, about, types of information generally belongs at the bottom of informational pages
  • Will it distract from primary site purpose? if a top bar is likely to be distracting to the site content, then it probably shouldn't be included.

I agree with the other posts here and I'd also add other determining factors.

  1. If the user needs assistance with orienting themselves with where they are within the site.
  2. Deciding whether or not the top bar information is valuable to have all the time. Sometimes it can be distracting for users who need to focus on the content as they read. Many sites resolve this by allowing the topbar to scroll and disappear in the top on long pages but once the user scrolls up just a tiny bit, the top bar appears again right away.

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.