What's the reason behind fixed (position) navbars?

Question

It's becoming almost customary for responsive designs to have fixed-position navbars, where the navbar is fixed to the top (usually, or even bottom sometimes) of the viewport of the browser.

Don't understand what I mean? Take a look at Twitter Bootstrap's project page. There's the dark navbar at the top. Now scroll down. You'll notice that the navbar doesn't go away. It stays, affixed to the top.

It's not just Bootstrap. Many large websites have been switching to responsive design lately, and most of them (like 90%) have incorporated fixed-to-top navbars. Some examples include: Mashable, ReadWrite, TechCrunch (not responsive design, but still), etc.

The question is, why? What's the reason behind this UI decision? Does it have any prominent advantages other than providing quick access to the menu?

Personally I find it very obtrusive (on desktop / laptop -- it's more natural on touch devices). And is there any study stating that the fixed-to-top navbar is intuitive?

Answer 1

Other than the answer provided by @icc97, a fixed navbar allows users to quickly switch to another page without having to scroll all the way up.

This is only exceptionally useful when your page contents may be lengthy (e.g. infinity scroll, blogs or articles) and your users browse through many pages on your site. Facebook, Mashable, ReadWrite and TechCrunch are magazine blogs which may have lengthy articles and most users don't only stop reading after one article.

Answer 2

If you use almost any desktop application - the menu bar will always be visible. e.g. if you Page Down in Microsoft Word the toolbar doesn't disappear off the top.

The fixed navbar is replicating that functionality.

Answer 3

Not an answer, but I want to point out some of the downsides to the fixed header (if a non-answer like this is out of line please let me know).

The fixed header is somewhat problematic on devices (Safari iPad and Chrome iPad): when you zoom a section of the page the header can become unfixed or semi-fixed. It will scroll but at a different rate than the rest of the page. The behavior is hard to predicts and it's mildy confusing. A fixed sidebar can have more erratic behavior and overlap zoomed content depending on implementation. I suggest testing on tablets with zooming and shrinking and reloading to check for behavior that might be unacceptable.

Another problem I've found is when you page scroll a fixed header page, the page will scroll down the full height of the page disregarding the fact that the effective viewport height smaller than the page height. In other word it scrolls up too much and you need to scroll back down (by the height of the fixed header) in order to not miss content.

There may be implementation ways to address these issues but most fixed header sites do not address them.

Answer 4

I think that this may have more to do with the sizing of the whole page. As screens get larger, so does the content. And that means more scrolling.

If you increase the width of the page content, you would generally also increase the height and this will create more scrolling when the user tries to click a navigation link.

Two of your examples (Mashable & ReadWrite) both make use of infinite scrolling, and this can produce some long pages.

Finally, by using a fixed navigation, designers are creating an experience similar to that of desktop and mobile applications (both of which have fixed navigation elements).

Answer 5

Fixed position makes it easier to navigate. You can read (scroll) to the bottom of the page, and then navigate to another page (using the fixed navbar) without having had to scroll to the top again.

I notice that the mobile (and non-mobile) version of this (StackExchange) site doesn't have fixed navbar. I guess that's for these reasons:

• Navigation (between pages) is relatively unimportant or unwanted on this site; for example maybe they want you to park on https://ux.stackexchange.com/questions and sometimes navigate to a specific question, and then use "Back" to get back to where you were.
• The page has a lot of content (e.g. an unlimited number of posts per topic, and it's read frequently (because its content keeps changing), so it's maximising readability of (i.e. content area on) this page, rather than maximising ability to navigate to other pages
• Pages have experienced users (who know the web site layout, who know they're able to navigate and who aren't afraid to scroll); this is unlike e.g. a business's web site which people might visit irregularly or the first time, whose usability (especially navigation) should be optimised for naive users, who will hopefully visit the site ones, find and buy what they need, and not come again.

The same seems to be true for http://www.bbc.com/news and https://www.amazon.fr/ and Wikipedia articles.

Whereas a lot of web sites (including the http://twitter.github.com/bootstrap/index.html mentioned in the OP) may be a "landing" page but they actually want/expect you to navigate to some other page.

Another difference may be whether navigation is done primarily using content (by clicking on links within the content area, e.g. clicking on specific topics of the StackExchange Questions list), versus whether the content is relatively static and the navigation primarily uses the navbar. So reword the first sentence of this answer to say, "Fixed position makes it easier to navigate with the navbar".

Lastly I'm guessing that you might want to choose the same strategy (i.e. either fixed or non-fixed) for all pages of the site, and for bth the mobile and non-mobile versions of the site.