Responsive header with dropdown menu: height and overflow

Question

I need a responsive header, which changes height depending on the screen resolution and wrapping of the elements. As the screen gets smaller, the menu wraps below my logo (which is desirable) and the height of the header has to increase. Obviously, I have set the properties of the header to height: auto and overflow: hidden and this will do the trick.

The problem is: I am using a dropdown menu. Using height: auto and overflow: hidden instead of a fixed height for the header, makes the dropdown items well... hidden of course.

My question is now: what is the best way to solve this? Solutions with pure CSS preferred.

Answer 1

Use a clear-fix instead of the overflow hidden. You want to clear the floats, and not actually hide the overflow. Read about that here:

http://nicolasgallagher.com/micro-clearfix-hack/

<header class="clear-fix"></header>

There are more elegant ways if you use a preprocessor etc.

.clear-fix:before,
.clear-fix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clear-fix:after {
    clear: both;
}

Here is a jsFiddle that should help.