Navigation above site header?

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

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.