Menu icon Foundation
Top Bar Customizations

I have a standard Top Bar menu. I need to customize a few things... may seem elementary to some :

>> I want some top level menu items to NOT be href links. if i take out the href it doesnt show up - i just want text and the down arrow
>> when in Mobile state - the dropdown menu is showing the top level menu item as I drill into the sub menus - i dont want that
>> I want to round the bottom corners of my dropdown menu - maybe also the top corners and have an upper pointer to the top level menu item - is there a code snippet for this somewhere???
>> I changed the name to an image logo on the left but its not centering well. not sure why? need css change?
>> is there a repository of Top Bar menu code templates to grab samples from? not just the basic stuff on Zurb site but more complicated variations

top bar

I have a standard Top Bar menu. I need to customize a few things... may seem elementary to some :

>> I want some top level menu items to NOT be href links. if i take out the href it doesnt show up - i just want text and the down arrow
>> when in Mobile state - the dropdown menu is showing the top level menu item as I drill into the sub menus - i dont want that
>> I want to round the bottom corners of my dropdown menu - maybe also the top corners and have an upper pointer to the top level menu item - is there a code snippet for this somewhere???
>> I changed the name to an image logo on the left but its not centering well. not sure why? need css change?
>> is there a repository of Top Bar menu code templates to grab samples from? not just the basic stuff on Zurb site but more complicated variations

Rafi Benkual about 5 years ago

The top-bar has a rigid structure. You need an anchor for the parent link but you can leave it empty

<li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>

According to the docs http://foundation.zurb.com/docs/javascript.html you can turn this off in the JS.

Post your code so we can help more