I am creating a site where I have decided to place the navigation bar above the site header (below).

enter image description here

I was just wondering if anyone has experience using this technique in a website, and had any feedback from users on whether on not they like this. My concern with this is that I don't want users to be searching for the navigation when they scroll down and the navigation becomes hidden.

  • You could fix it to the top of the screen so it's always at the top. The Google blog comes to mind, but there are other good examples of doing this. (BoxedIce is another one)
    – Matt
    Commented Jun 7, 2012 at 17:11

2 Answers 2


There are plenty of successful websites out there using this navigation layout, so it not all bad or all good. I personally am against it, an here's why. It violates visual hierarchy. With the nav above the site name (and/or) tagline.

With the traditional layout, the nav is clearly a child, and the logo and page name are clearly the parent item. Clearly indicating to the user that these buttons will move you around the parent site.



download bmml source – Wireframes created with Balsamiq Mockups

With the nav on top layout style, it is less clear that the nav is a child of the site name, and not independent. For example, I as a user may think that this is an inter-site nav (like the top nav on google, or cheeseburger network); rather than the normal intra-site nav.

Your Layout


download bmml source

If you must put the nav above the header, here are some alternatives to consider: With this one the containers are organized so the nav is still the child, but its still less clear.

Alternative 1


download bmml source

Or you could do something like TechCrunch and keep the logo inline with the nav, which works very well and is quite clear:

Alternative 2


download bmml source

Lastly you might consider just putting the nav below the header, and on user scroll, fix it to the top of the browser.

  • Thank you, I agree that the way I have it laid out right now may give the user the impression of an inter-site nav instead of the intra-site nav. I think I may try something like your Alt2 example and see how that works out. I would +1 you but I don't have enough rep yet ;). Anyways, thanks a lot.
    – PL3X
    Commented Jun 7, 2012 at 18:39
  • Glad to help. :) Commented Jun 7, 2012 at 18:41
  • "Lastly you might consider just putting the nav below the header, and on user scroll, fix it to the top of the browser." It would be really helpful if you could you suggest a tutorial site to do this :)
    – Panshul
    Commented Jan 18, 2013 at 6:24
  • 1
    @pansp that, my friend, is a question of engineering and for stackoverflow not UX exchange. Commented Jan 18, 2013 at 18:39

Your concern shouldn't be that navigation disappears when people scroll down (it will also disappear if it's part of the header or under it - unless it's sticky). Your concern should be that people won't notice in to begin with. This for two reasons:

  1. Users are accustomed to treat the header as the top cut-off of the page, it won't be natural for them to search for anything above the header.

  2. Regardless of users' habits, the large header draws all attention away from the small navigation bar at the top simply because it's so much larger and visually heavier. You will need to work hard on graphic design to make the navigation stand out - and if you accomplish that, you'll find that your header feels like it doesn't belong there.

Also - the navigation bar usually controls the area underneath it. The way you propose to do it, you break this connection and the area immediately under the navigation bar remains the same on all pages. This is confusing and weird and it interferes with your users' understanding that the nav.bar is indeed a nav.bar.

  • I agree that my navigation might disappear when scrolling regardless of where it is, but my main concern is that the user knows where to look for it when they want to come back up and use it. The only reason I tried the nav this way is to attempt to break from the norm of nav under header site.
    – PL3X
    Commented Jun 7, 2012 at 18:43

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.