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?

  • @mauris provided the reason enough to stick with fixed-position navbars, so I am marking it as the answer. Any input is still welcome as I'll continue to watch this question. – its_me Jan 6 '13 at 15:06
  • Since last year when this question was asked, two of the three sites mentioned have reneged on their fixed navbars (at this moment, ReadWrite and TechCrunch no longer have fixed navbars). I would love to see more discussion about this design paradigm, pros and cons. – thirdender Feb 5 '14 at 21:56
up vote 18 down vote accepted

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.

  • 5
    Right... this is especially true with pages that have infinite scroll enabled + very useful on mobile devices where you'd have to swipe your way up. – its_me Jan 6 '13 at 14:39
  • 2
    The counter argument however is that by fixing the navigation you're taking up valuable screen real-estate, something increasingly important on responsive sites because when viewed on a mobile there is already limited space to view the content. Is navigation more important than content? – JonW Jan 6 '13 at 15:18
  • @JonW Here mobile = smartphone, where (in general) the minimum resolution is 320x480 pixels. A < 30 pixel navbar doesn't feel that obtrusive. IMO a fixed navbar feels more natural on touch devices than on desktops. Anyway, this is just what I think. – its_me Jan 6 '13 at 16:23
  • 1
    @JonW indeed that fixed navbar takes up a lot of valuable space. But what's more valuable than providing the ease of navigation through the app? That's why the Facebook mobile app has a short fixed navbar, then a sidebar that extends out for more options - a good balance between the two factors we've described. – mauris Jan 6 '13 at 21:18

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.

  • Good one, makes sense! – its_me Jan 6 '13 at 16:52

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.

  • There are two things I'd like to ask. (1) Why would you zoom on a tablet such as an iPad, especially when the whole web page fits in quite well on the large screen? (2) Okay, lets consider that some people are only comfortable at a certain font-size, and therefore zoom-in. Unless you zoom-in a lot, the fixed navbar doesn't seem like a problem on a tablet. (3) I'd agree that zooming would be a problem on smartphones. But in most cases, people who use a smartphone to browse the web on a smartphone don't have to zoom-in (esp. since content has already adapted to the phone's layout). – its_me Jan 7 '13 at 6:08
  • It doesn't sound like its a downside of the concept of a fixed header - more like the downside of a badly coded fixed header. The position:fixed should be a fairly standard css implementation. Have you tried to see if the Twitter Bootstrap fixed header works correctly in the iPad? – icc97 Jan 7 '13 at 13:30
  • Zooming behavior is still broken under on iOS 6.0. – Lenar Hoyt Jan 10 '13 at 5:38

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).

  • Welcome to the UX Stack Exchange. Nice first post! I have a couple of questions on it that maybe you can clarify. (1) Do you have any citations that could support your assertion that "screens get larger." I would think that with the proliferation of mobile devices, screens are actually getting smaller. (2) Assuming that screens are getting larger, wouldn't that mean that they can display more content per screen, and would thus require less scrolling? (3) Do you have any sources to support the assertion that amount of content is correlated with screen size? – Graham Herrli Jan 6 '13 at 18:02
  • If you change your ideas about any of the assertions, you're welcome to edit your post. We prefer that posts be supported by evidence whenever possible. You might also want to complete the last sentence: "designers are creating an experience similar"...to what? Welcome again to the site. I hope you enjoy using it! Please don't take my criticism personally; you have some interesting ideas in this post, and I look forward to seeing you around the site. – Graham Herrli Jan 6 '13 at 18:07
  • @3nafish Sorry, I don't have any definitive sources other than the web usability lab that I work in and seeing the general changing trend. Your point about mobile devices is a good one that I hadn't thought about as we have only recently stared working with mobile/tablet devices. – Rob Farr Jan 6 '13 at 21:03

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.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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