Fixed menu bar on top with flexible height – help?

[markwienands]

I am trying to accomplish a fixed menu bar on the top of the page that has a flexible height. As the height changes, it should pushe the content down as well.

I do not have any problem with a fixed menu height and a top-margin to the content below it. But what if the menu height changes? Is there a CSS way that handles this? Or does this call for jqeury?

[Paulie_D]

Why would the header height change?

Otherwise, yes you would need JS/JQ

[markwienands]

If I decide to change the height of the fixed menu, I would have to go through every single CSS code and adjust the content’s top padding or top margin. Also my menu will be responsive as well for larger height on mobile devices.

Facebook top menu seems to be doing it right. If you inspect the top fixed blue bar element and change its height. The content below it gets pushed down accordingly as well.

[Leonhard Ortner]

Hi,

maybe this will help u: [LINK](http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/ “Codrops – Header/Nav on Scroll-Effekt”)

wbr
leo

[markwienands]

Although thanks for the link, it still does not answer my question. I don’t have any problem in making a fixed menu with flexible height.

The real question is, if I decide to make the height of the menu from 50px to lets say…. 100px… that means that the content at the very top of the page will disappear behind the menu, unless I also give its padding about 100px as well.

Here’s my working example: [http://jsfiddle.net/qfacZ/](http://jsfiddle.net/qfacZ/ “http://jsfiddle.net/qfacZ/”)

But what if I change the height: [http://jsfiddle.net/u9b2r/](http://jsfiddle.net/u9b2r/ “http://jsfiddle.net/u9b2r/”)
A portion of my content is lost behind the menu.

[Leonhard Ortner]

Hi,

oh you mean the “Headbang-Effekt” i call it so ;) just give the first element under your nav-bar a paddin/margin-top… controll these with @media (when u change the height u have to change the margin/padding…)

may not the best practice but that the way i deal with this…

you could do these changes with js too ;)

wbr
leo

[markwienands]

Ok, I think I did the trick with just pure CSS:

[http://jsfiddle.net/u9b2r/3/](http://jsfiddle.net/u9b2r/3/ “http://jsfiddle.net/u9b2r/3/”)

I basically added a duplicate menu bar under the fixed menu bar, but with a relative position. So now when the height of the fixed menu bar changes, the content is pushed down accordingly.

[Leonhard Ortner]

Hi markwienands,

you should never use an “ID” twice in the same HTML-File…

<div id=”menu”>

Home
Dashboard
Downloads

</div>

<div id=”menu” class=”filler”></div>

wbr
leo

[markwienands]

right right yeah… totally forgot about that *bangs head*

Thanks Leo!

[Author]

Posts