Menu icon Foundation
Mixing Responsive Navigation with Drilldown

I am having a strange issue when I am using Responsive Navigation with Drilldown (with Foundation 6).

The issue is that when the Drilldown menu is exposed it's height is determined by the height of the largest ul. One of my sub-menu is 12 items long, but the initial top level menu is only 6. This make the menu have a min-height of 1045px, and lots and lots of blank, white space.

Does anyone know a way to collapse the submenus until they are exposed?

javascriptdrilldownrepsonsivenavigation

I am having a strange issue when I am using Responsive Navigation with Drilldown (with Foundation 6).

The issue is that when the Drilldown menu is exposed it's height is determined by the height of the largest ul. One of my sub-menu is 12 items long, but the initial top level menu is only 6. This make the menu have a min-height of 1045px, and lots and lots of blank, white space.

Does anyone know a way to collapse the submenus until they are exposed?

Rafi Benkual 3 months ago

What version are of Foundation 6 are yo on? in 6.3, you have an option to have the height calculated and adjust for each <ul>

See it in action: http://foundation.zurb.com/sites/docs/drilldown-menu.html#autoheight

Adam Sherman 3 months ago

Hi all, nevermind. 

I realised there was documentation that covered this. My bad.

I need to add the `autoHeight` attribute to my drilldown menus.

 

Karima Premji 3 days ago

ANSWER FOUND: add to stylesheet

.is-drilldown { min-height: 0!important;}

Should have remembered the cascading part of stylesheet ;(

---------------

hello Rafi

I'm using F6.2.0 so that I can place a responsive dropdown with drilldown option.  I have this working beautifully.  However like others, i'm having an issue with the extra space the drilldown is taking on mobiles. I have added the attributes as listing in the above documentation, with no success.  I was looking in firebug and noticed that if I simply removed the inline style of min-height, it did the trick.

Since this is part of the js and probably used elsewhere in the code, I did not want to simply comment it out of the js.  How can i bypass this?