Menu icon Foundation
Vertical menu enclosed by min-height <div>

I have two vertical menus (one above the other) which work fine individually, but Foundation 6 is wrapping each one in a <div> tag and setting the min-height value to over 3,600px.

This means that in Mobile view, the user has to scroll down through masses of white space before they find the next vertical menu.

I am using the markup shown here - http://foundation.zurb.com/sites/docs/menu.html#nested-style

I'd be most grateful if anyone could please explain how I can get the menu to expand and contract dynamically, rather than have Foundation apply such a massive meni-height to the container <div>

foundation 6vertical menumin-heightdiv

I have two vertical menus (one above the other) which work fine individually, but Foundation 6 is wrapping each one in a <div> tag and setting the min-height value to over 3,600px.

This means that in Mobile view, the user has to scroll down through masses of white space before they find the next vertical menu.

I am using the markup shown here - http://foundation.zurb.com/sites/docs/menu.html#nested-style

I'd be most grateful if anyone could please explain how I can get the menu to expand and contract dynamically, rather than have Foundation apply such a massive meni-height to the container <div>

Rafi Benkual about 3 years ago

You mentioned you have 2 menus stacked. What is the use case for having 2? What type of site are you building with it?

Nick Chambers about 3 years ago

Hi Rafi,

It's a holiday accommodation site and the left-hand margin has a Locations cascading menu, followed by a heading, followed by a Categories cascading menu.

Rafi Benkual about 3 years ago

 Cool! I've used a ton of travel sites and the navigation is always the make or break for me. Are you trying to collapse some of the menu items in an accordion?

Nick Chambers about 3 years ago

Actually Rafi, even if I only have one instance of the menu, it still encloses it with a div that has min-height set to a very high value. This causes the user to have to scroll through lots of white space before they get to see the content below the menu, in Mobile view.

Knight Yoshi about 3 years ago

Would you mind creating a working CodePen that shows what you're talking about? :)

Nick Chambers about 3 years ago

I've just noticed that someone else is experiencing the exact same problem as myself.

 

See https://github.com/zurb/foundation-sites/issues/7821