Navigation above site header?

Question

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

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.

Answer 1

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.

Traditional

^{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.

Answer 2

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.