- This topic is empty.
July 25, 2013 at 12:40 am #144494
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?July 25, 2013 at 1:41 am #144499Paulie_DMember
Why would the header height change?
Otherwise, yes you would need JS/JQJuly 25, 2013 at 2:56 am #144504
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.July 25, 2013 at 8:38 am #144574
maybe this will help u: [LINK](http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/ “Codrops – Header/Nav on Scroll-Effekt”)
leoJuly 25, 2013 at 9:51 am #144583
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.July 25, 2013 at 9:55 am #144584
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 ;)
leoJuly 25, 2013 at 10:00 pm #144634
Ok, I think I did the trick with just pure CSS:
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.July 26, 2013 at 1:38 am #144651
you should never use an “ID” twice in the same HTML-File…
<div id=”menu” class=”filler”></div>
leoJuly 26, 2013 at 1:40 am #144652
right right yeah… totally forgot about that *bangs head*
- The forum ‘CSS’ is closed to new topics and replies.