Menu icon Foundation
Zurb Foundation 5 Dynamic Resize of Top-bar

Currently trying to dynamically resize the topbar according to scrolled height, so that I can achieve something to the effect of: http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/

However when I try to dynamically allocate the height the elements within do not adjust to the correct height and a total mess is created. Is there a way to easily dynamically allocate height of the foundation top-bar-nav ?

topbar

Currently trying to dynamically resize the topbar according to scrolled height, so that I can achieve something to the effect of: http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/

However when I try to dynamically allocate the height the elements within do not adjust to the correct height and a total mess is created. Is there a way to easily dynamically allocate height of the foundation top-bar-nav ?

Rafi Benkual over 5 years ago

This is possible. Using topbar would take heavy customization. It would be much easier with a simple button-bar.

Thil over 5 years ago

@rafi Thanks for the reply.. I will give it a go and post some code back when I get it working

Christian Matthias over 5 years ago

The menu IMHO is a mess in some aspects... and probably should be re-written... It is extremely hard to adjust and work with.

Christian Matthias over 5 years ago

Ok here is a sample of what I constructed based on the following tutorial. www.salonbkb.com

http://www.webdesignerdepot.com/2013/03/how-to-create-a-resizing-menu-bar/

One issue is that I want to kinda use the title-area text to resize from larger to smaller... as you see in the example the css animation the font is slower than the rest of the menu animation. the img works very well.

I like it what do you think.

Moreover you have to keep in mind the header height bg has to be the same color as the menu you are using...

kinda sloppy.

The other bad part is the off canvass menu I am using. in chrome the burger icon works but brings the entire page down about the size of the f- padding top thing...

very oddly IE doesn't seem to have a problem with this.

I will post a code pen soon of the code and changes but I would like to get a couple things straight first.

Christian Matthias over 5 years ago

wow I have to say IE handles this beautifully... Chrome seems to be having an issue with the setup. That is really odd.

Samuel Kelemen over 5 years ago

I agree. the menus are difficult to work with, and not very customizable with out basically rewriting it all anyway. i tired to add to the off canvas menu, and it ended up being a lot of markup, and not very nice results