Menu icon Foundation
Top-bar dropdown doubling menuitem

We have a very standard top-bar using a right adjusted dropdown with two items.
However when we reach medium and small breakpoint, the dropdown button gets added to the menuitems.
We cannot seem to locate the problem.

<!-- ************** fixed menubar ****************** -->
<div class="contain-to-grid fixed"> 
        <nav class="top-bar" data-topbar role="navigation" >
                <ul class="title-area">
                    <li class="name"><img src="gfx/TV2B_Logo.png" /></li> 
                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul> 
                <section class="top-bar-section">
                    <ul class="right">
                        <li class="active"><a href="/"><i class="fi-home size-24"></i></a></li>
                        <li class="has-dropdown"><a href="#"><i class="fi-list size-24"></i>Menu</a>
                            <ul class="dropdown">
                                <li class=""><a href="?area=nyheder"><i class="fi-results size-24"></i>Nyheder</a></li>
	                            <li class=""><a href="?area=netTV"><i class="fi-play-video size-24"></i>NetTV</a></li>
                        </ul></li>

                    </ul>
                </section>
        </nav>
</div>

            

         

Foundationdropdowntop-barproblembug

We have a very standard top-bar using a right adjusted dropdown with two items.
However when we reach medium and small breakpoint, the dropdown button gets added to the menuitems.
We cannot seem to locate the problem.

<!-- ************** fixed menubar ****************** -->
<div class="contain-to-grid fixed"> 
        <nav class="top-bar" data-topbar role="navigation" >
                <ul class="title-area">
                    <li class="name"><img src="gfx/TV2B_Logo.png" /></li> 
                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul> 
                <section class="top-bar-section">
                    <ul class="right">
                        <li class="active"><a href="/"><i class="fi-home size-24"></i></a></li>
                        <li class="has-dropdown"><a href="#"><i class="fi-list size-24"></i>Menu</a>
                            <ul class="dropdown">
                                <li class=""><a href="?area=nyheder"><i class="fi-results size-24"></i>Nyheder</a></li>
	                            <li class=""><a href="?area=netTV"><i class="fi-play-video size-24"></i>NetTV</a></li>
                        </ul></li>

                    </ul>
                </section>
        </nav>
</div>

            

         

This post has been closed. No new replies can be added.

Rafi Benkual about 4 years ago

That is the normal behavior of top-bar. It will take the top level <li>'s and move them into the mobile menu. If it has a dropdown it will become a sub-menu.

There is a post here with a similar question:
http://foundation.zurb.com/forum/posts/24876-mobile-top-bar-menu-with-direct-dropdown

I think the class you need to bind to the mobile menu opening is .moved.

<li class="has-dropdown not-click moved"><a href="#"><i class="fi-list size-24"></i>Menu</a>

Carsten Johannesen about 4 years ago

Thanks Rafi!

That sent me in the right direction.
Found that I had to change a simple setting in the foundation.topbar.js file!

It is mentioned in the Foundation docs, but very easy to miss.

Problem solved:
``` settings : {
index : 0,
sticky_class : 'sticky',
custom_back_text : true,
back_text : 'Back',
mobile_show_parent_link : false,
is_hover : true,
scrolltop : true, // jump to top when sticky nav menu toggle is clicked
sticky_on : 'all'
},