top-bar dysfunctional on mobile view

[stigmatamartyr]

I have been trying to use the Foundation top-bar component to build out a very deep tree of navigation. The tree works just great when in full-desktop view, but below the mobile breakpoint, I get particular strange behavior with menus on the same level in the tree which themselves have children. See screenshot below:

The relevant code is as follows: <nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name"><h1><a href="#">Menu</a></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
<section>
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">
<a class="active" href="#">Item 1</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li class="has-dropdown">
<a href="#" class="">Level 1, Has Dropdown</a>
<ul class="dropdown">
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li class="has-dropdown"><a href="#">Level 2, Has Dropdown (1)</a>
<ul class="dropdown">
<li><label>Section</label></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li class="divider"></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
<li class="has-dropdown"><a href="#">Level 2, Has Dropdown (2)</a>
<ul class="dropdown">
<li><label>Section</label></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li class="divider"></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</ul>

</nav>

It is simply adapted from the example code from the documentation, but when I added "Level 2, Has Dropdown(2)" element, I see the strangeness depicted above. I'm not sure if this is a bug or my not understanding something about how to use the widget.

Thanks, Duane

[talha-asad]

I also see an overly expanded navigation menu when i open my page below the breakpoint (i.e mobile view)

The bug i could see is that foundation adds this "min-height: 206px;" to the nav element. This shouldn't be there. Please fix this as this is a pretty hideous bug.

[stigmatamartyr]

I think I may have this one figured out, there's a line in foundation.css that is as follows:

.top-bar ul > li.has-dropdown .dropdown li.has-dropdown.moved .dropdown { top: 0; visibility: visible; }

I changed this to: .top-bar ul > li.has-dropdown .dropdown li.has-dropdown.moved > .dropdown { top: 0; visibility: visible; }

I noticed the "extra" menus that were showing up had the visibility set to "visible", so I changed the above which causes only the direct descendant to be visible, and now everything is copacetic. It seems very odd though that this wouldn't have been an issue for anyone else, though... so.. who knows?

[hatefulcrawdad]

Thanks, this is fixed in the latest version.