Blue Flavor Header Design Technique

Avatar of Jermayn Parker
Jermayn Parker on (Updated on )

Headers are an important factor in web design, they can either make or break a design. Since web 2.0, we have seen many design trends and one of the most groundbreaking is the big header. However, headers have remained boxy throughout.

Blueflavor, a mobile design website, has bucked this trend with something I have yet to see elsewhere and does not require great CSS skills to create.

blue flavor header

As you can see they have the menu and start of the content pushed into the header. Now how do they do that?

You can either slice the image into seperate pieces and try and fit them with (floating) divs. However, This leads to possible problems with browser differences with IE 6, 7 and Firefox.


The best way is to keep the image whole. Blue Flavor uses two columns with the first column sitting under the longer part of the header. The content div sits under the shorter part of the header. Normally the content div would sit on the same level as the first column. To move it up into the gap of the image, use a negative margin which will shift it up. Blue Flavor uses margin-top: -20px.

Negative margins are not usually used but this is a simple way to change the look and feel of a header.