Menu icon Foundation
foundation 5 top bar issue: floating to down and not showing menu

Zurb foundation, I've found top-bar to be working good. But whenever large no of menu Items are added, the menu items float down instead of appearing collapsible menu.
Code:

Here is the code that generated following result

  <div class="fixed">
  <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area"> 
  <li class="name"> 

  </li>
  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
  <ul class="left">
  <li class="has-dropdown"><a href="#">WIKISAN</a>
  <ul class="dropdown">
  <li><a href="user/setlocation/8090220140000009" title="Click here to set program and location">Choose Another Program</a></li>
  <li><a href="index">Home</a></li>
  </ul>
  </li>
  <li class="has-dropdown"><a href="#">Organization</a>
  <ul class="dropdown">
  <li><a href="organization/list">List Organization</a></li>            
  <li><a href="organization/add">Add Organization</a></li>        
  </ul>
  </li>
  <li class="has-dropdown"><a href="#">Group</a>
  <ul class="dropdown">
  <li><a href="group/list">List Group</a></li>            
  <li><a href="group/add">Add Group</a></li>        
  </ul>
  </li>
  <li class="has-dropdown"><a href="#">Individual</a>
  <ul class="dropdown">
  <li><a href="individual/list">List Individual</a></li>          
  <li><a href="individual/add">Add Individual</a></li>          
  <li><a href="individual/add_to_program">Add Individual To Program</a></li>          
  </ul>
  </li>      
  <li class="has-dropdown"><a href="#">Program</a>
  <ul class="dropdown">
  <li class="has-dropdown"><a href="#">Kisan</a>
  <ul class="dropdown">
  <li><a href="#">Kisan Training Form</a></li>
  <li><a href="#">Kisan Training List </a></li>
  <li><a href="leverage/add">Kisan Leverage Form</a></li>
  <li><a href="leverage/list">Kisan Leverage List</a></li>
  <li><a href="asset">Kisan Asset </a></li>
  <li><a href="seed">Kisan Seed </a></li>
  </ul>
  </li>  
  </ul>
  </li><li class="has-dropdown"><a href="#">Settings</a>
  <ul class="dropdown">
  <li><a href="unit/convert" class="converter">Land Unit Converter</a></li><li><a href="indicator/add">Add Indicator</a></li><li><a href="district/add">Add District</a></li><li class="has-dropdown"><a href="#">Individual Lookup</a>
  <ul class="dropdown">
  <li><a href="indvact/list">Individual Activity</a></li>
  <li><a href="indvedu/list">Individual Education</a></li>
  <li><a href="indvlang/list">Language</a></li>
  <li><a href="indvlat/list">Latrine Type</a></li>
  <li><a href="indvocc/list">Occupation List</a></li>
  <li><a href="indvproj/list">Project List</a></li>
  <li><a href="indvrel/list">Religion</a></li>
  <li><a href="indvsoc/list">Social Group</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Organization Lookup</a>
  <ul class="dropdown">
  <li><a href="orgcat/list">Organization Category</a></li>
  <li><a href="orgcmp/list">Organization Component</a></li>                        
  <li><a href="orgstage/list">OCAT Stage List</a></li>
  <li><a href="orgsec/list">Organization Sector</a></li>
  <li><a href="orgtype/list">Organization Type</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Group Lookup</a>
  <ul class="dropdown">
  <li><a href="grpreg/list">Group Registration</a></li>
  <li><a href="orgsec/list">Group Sector</a></li>
  <li><a href="grptype/list">Group Type</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Training Lookup</a>
  <ul class="dropdown">
  <li><a href="trnsector/list">Training Sector</a></li>
  <li><a href="bentype/list">Beneficiary Type</a></li>
  <li><a href="trntype/list">Training Type</a></li>
  </ul></li><li class="has-dropdown"><a href="#">Leverage Lookup</a>
  <ul class="dropdown">
  <li><a href="lvgscheme/list">Leverage Scheme</a></li>
  </ul></li></ul></li>      <li class="has-dropdown"><a href="#">Report</a>
  <ul class="dropdown">
  <li><a href="report/dashboard">Report Dashboard</a></li>
  <li><a href="report/summary">Summary Query Report</a></li>
  </ul>
  </li>   
  </ul>
  <ul class="right">
  <li class="has-dropdown"><a href="individual/view/2090220140000001"> Logged in as Sujit Prasad Baniya</a>
  <ul class="dropdown">

  <li><a href="user/password/8090220140000009">Change Password</a></li><li><a href="user/defaultlocation/8090220140000009">User Location Settings</a></li><li class="has-dropdown"><a href="#">Admin</a>
  <ul class="dropdown"><li><a href="user/add">Add users</a></li>
  <li><a href="user/list">List users</a></li>
  <li><a href="program/target">Set Program Targets</a></li>
  <li><a href="user/setdefault">Set Default Location</a></li>
  <li><a href="user/querylog">Query Log Report</a></li><li><a href="#" class="debug-on">Debug Mode On</a></li><li><a href="program/add">Add Program</a></li>
  <li><a href="program/list">List Program</a></li>
  <li><a href="activity/add">Add Activity</a></li>
  <li><a href="activity/add_to_program">Add Activity To Program</a></li></ul></li>  
  <li><a href="logout">Logout</a></li>

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

         

java scriptFoundationhtmlcss

Zurb foundation, I've found top-bar to be working good. But whenever large no of menu Items are added, the menu items float down instead of appearing collapsible menu.
Code:

Here is the code that generated following result

  <div class="fixed">
  <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area"> 
  <li class="name"> 

  </li>
  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
  <ul class="left">
  <li class="has-dropdown"><a href="#">WIKISAN</a>
  <ul class="dropdown">
  <li><a href="user/setlocation/8090220140000009" title="Click here to set program and location">Choose Another Program</a></li>
  <li><a href="index">Home</a></li>
  </ul>
  </li>
  <li class="has-dropdown"><a href="#">Organization</a>
  <ul class="dropdown">
  <li><a href="organization/list">List Organization</a></li>            
  <li><a href="organization/add">Add Organization</a></li>        
  </ul>
  </li>
  <li class="has-dropdown"><a href="#">Group</a>
  <ul class="dropdown">
  <li><a href="group/list">List Group</a></li>            
  <li><a href="group/add">Add Group</a></li>        
  </ul>
  </li>
  <li class="has-dropdown"><a href="#">Individual</a>
  <ul class="dropdown">
  <li><a href="individual/list">List Individual</a></li>          
  <li><a href="individual/add">Add Individual</a></li>          
  <li><a href="individual/add_to_program">Add Individual To Program</a></li>          
  </ul>
  </li>      
  <li class="has-dropdown"><a href="#">Program</a>
  <ul class="dropdown">
  <li class="has-dropdown"><a href="#">Kisan</a>
  <ul class="dropdown">
  <li><a href="#">Kisan Training Form</a></li>
  <li><a href="#">Kisan Training List </a></li>
  <li><a href="leverage/add">Kisan Leverage Form</a></li>
  <li><a href="leverage/list">Kisan Leverage List</a></li>
  <li><a href="asset">Kisan Asset </a></li>
  <li><a href="seed">Kisan Seed </a></li>
  </ul>
  </li>  
  </ul>
  </li><li class="has-dropdown"><a href="#">Settings</a>
  <ul class="dropdown">
  <li><a href="unit/convert" class="converter">Land Unit Converter</a></li><li><a href="indicator/add">Add Indicator</a></li><li><a href="district/add">Add District</a></li><li class="has-dropdown"><a href="#">Individual Lookup</a>
  <ul class="dropdown">
  <li><a href="indvact/list">Individual Activity</a></li>
  <li><a href="indvedu/list">Individual Education</a></li>
  <li><a href="indvlang/list">Language</a></li>
  <li><a href="indvlat/list">Latrine Type</a></li>
  <li><a href="indvocc/list">Occupation List</a></li>
  <li><a href="indvproj/list">Project List</a></li>
  <li><a href="indvrel/list">Religion</a></li>
  <li><a href="indvsoc/list">Social Group</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Organization Lookup</a>
  <ul class="dropdown">
  <li><a href="orgcat/list">Organization Category</a></li>
  <li><a href="orgcmp/list">Organization Component</a></li>                        
  <li><a href="orgstage/list">OCAT Stage List</a></li>
  <li><a href="orgsec/list">Organization Sector</a></li>
  <li><a href="orgtype/list">Organization Type</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Group Lookup</a>
  <ul class="dropdown">
  <li><a href="grpreg/list">Group Registration</a></li>
  <li><a href="orgsec/list">Group Sector</a></li>
  <li><a href="grptype/list">Group Type</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Training Lookup</a>
  <ul class="dropdown">
  <li><a href="trnsector/list">Training Sector</a></li>
  <li><a href="bentype/list">Beneficiary Type</a></li>
  <li><a href="trntype/list">Training Type</a></li>
  </ul></li><li class="has-dropdown"><a href="#">Leverage Lookup</a>
  <ul class="dropdown">
  <li><a href="lvgscheme/list">Leverage Scheme</a></li>
  </ul></li></ul></li>      <li class="has-dropdown"><a href="#">Report</a>
  <ul class="dropdown">
  <li><a href="report/dashboard">Report Dashboard</a></li>
  <li><a href="report/summary">Summary Query Report</a></li>
  </ul>
  </li>   
  </ul>
  <ul class="right">
  <li class="has-dropdown"><a href="individual/view/2090220140000001"> Logged in as Sujit Prasad Baniya</a>
  <ul class="dropdown">

  <li><a href="user/password/8090220140000009">Change Password</a></li><li><a href="user/defaultlocation/8090220140000009">User Location Settings</a></li><li class="has-dropdown"><a href="#">Admin</a>
  <ul class="dropdown"><li><a href="user/add">Add users</a></li>
  <li><a href="user/list">List users</a></li>
  <li><a href="program/target">Set Program Targets</a></li>
  <li><a href="user/setdefault">Set Default Location</a></li>
  <li><a href="user/querylog">Query Log Report</a></li><li><a href="#" class="debug-on">Debug Mode On</a></li><li><a href="program/add">Add Program</a></li>
  <li><a href="program/list">List Program</a></li>
  <li><a href="activity/add">Add Activity</a></li>
  <li><a href="activity/add_to_program">Add Activity To Program</a></li></ul></li>  
  <li><a href="logout">Logout</a></li>

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

         
Cole Beck almost 5 years ago

If you are alright with the menus popping out on-hover you can add "not-click" to your list classes. This seemed to work for me using your code above:

<div class="fixed">
  <nav class="top-bar" data-topbar="" role="navigation">
  <ul class="title-area"> 
  <li class="name"> 

  </li>
  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
  <ul class="left">
  <li class="has-dropdown not-click"><a href="#">WIKISAN</a>
  <ul class="dropdown">
  <li><a href="user/setlocation/8090220140000009" title="Click here to set program and location">Choose Another Program</a></li>
  <li><a href="index">Home</a></li>
  </ul>
  </li>
  <li class="has-dropdown not-click"><a href="#">Organization</a>
  <ul class="dropdown">
  <li><a href="organization/list">List Organization</a></li>            
  <li><a href="organization/add">Add Organization</a></li>        
  </ul>
  </li>
  <li class="has-dropdown not-click"><a href="#">Group</a>
  <ul class="dropdown">
  <li><a href="group/list">List Group</a></li>            
  <li><a href="group/add">Add Group</a></li>        
  </ul>
  </li>
  <li class="has-dropdown not-click"><a href="#">Individual</a>
  <ul class="dropdown">
  <li><a href="individual/list">List Individual</a></li>          
  <li><a href="individual/add">Add Individual</a></li>          
  <li><a href="individual/add_to_program">Add Individual To Program</a></li>          
  </ul>
  </li>      
  <li class="has-dropdown not-click"><a href="#">Program</a>
  <ul class="dropdown">
  <li class="has-dropdown"><a href="#">Kisan</a>
  <ul class="dropdown">
  <li><a href="#">Kisan Training Form</a></li>
  <li><a href="#">Kisan Training List </a></li>
  <li><a href="leverage/add">Kisan Leverage Form</a></li>
  <li><a href="leverage/list">Kisan Leverage List</a></li>
  <li><a href="asset">Kisan Asset </a></li>
  <li><a href="seed">Kisan Seed </a></li>
  </ul>
  </li>  
  </ul>
  </li><li class="has-dropdown not-click"><a href="#">Settings</a>
  <ul class="dropdown">
  <li><a href="unit/convert" class="converter">Land Unit Converter</a></li><li><a href="indicator/add">Add Indicator</a></li><li><a href="district/add">Add District</a></li><li class="has-dropdown"><a href="#">Individual Lookup</a>
  <ul class="dropdown">
  <li><a href="indvact/list">Individual Activity</a></li>
  <li><a href="indvedu/list">Individual Education</a></li>
  <li><a href="indvlang/list">Language</a></li>
  <li><a href="indvlat/list">Latrine Type</a></li>
  <li><a href="indvocc/list">Occupation List</a></li>
  <li><a href="indvproj/list">Project List</a></li>
  <li><a href="indvrel/list">Religion</a></li>
  <li><a href="indvsoc/list">Social Group</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Organization Lookup</a>
  <ul class="dropdown">
  <li><a href="orgcat/list">Organization Category</a></li>
  <li><a href="orgcmp/list">Organization Component</a></li>                        
  <li><a href="orgstage/list">OCAT Stage List</a></li>
  <li><a href="orgsec/list">Organization Sector</a></li>
  <li><a href="orgtype/list">Organization Type</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Group Lookup</a>
  <ul class="dropdown">
  <li><a href="grpreg/list">Group Registration</a></li>
  <li><a href="orgsec/list">Group Sector</a></li>
  <li><a href="grptype/list">Group Type</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Training Lookup</a>
  <ul class="dropdown">
  <li><a href="trnsector/list">Training Sector</a></li>
  <li><a href="bentype/list">Beneficiary Type</a></li>
  <li><a href="trntype/list">Training Type</a></li>
  </ul></li><li class="has-dropdown"><a href="#">Leverage Lookup</a>
  <ul class="dropdown">
  <li><a href="lvgscheme/list">Leverage Scheme</a></li>
  </ul></li></ul></li>      <li class="has-dropdown not-click"><a href="#">Report</a>
  <ul class="dropdown">
  <li><a href="report/dashboard">Report Dashboard</a></li>
  <li><a href="report/summary">Summary Query Report</a></li>
  </ul>
  </li>   
  </ul>
  <ul class="right">
  <li class="has-dropdown"><a href="individual/view/2090220140000001"> Logged in as Sujit Prasad Baniya</a>
  <ul class="dropdown">

  <li><a href="user/password/8090220140000009">Change Password</a></li><li><a href="user/defaultlocation/8090220140000009">User Location Settings</a></li><li class="has-dropdown"><a href="#">Admin</a>
  <ul class="dropdown"><li><a href="user/add">Add users</a></li>
  <li><a href="user/list">List users</a></li>
  <li><a href="program/target">Set Program Targets</a></li>
  <li><a href="user/setdefault">Set Default Location</a></li>
  <li><a href="user/querylog">Query Log Report</a></li><li><a href="#" class="debug-on">Debug Mode On</a></li><li><a href="program/add">Add Program</a></li>
  <li><a href="program/list">List Program</a></li>
  <li><a href="activity/add">Add Activity</a></li>
  <li><a href="activity/add_to_program">Add Activity To Program</a></li></ul></li>  
  <li><a href="logout">Logout</a></li>

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

Rafi Benkual almost 5 years ago

Not seeing what the issue is. http://codepen.io/rafibomb/pen/ryGBE

BTW - the proper class for a fixed top-bar is "sticky".

Arturs Z almost 5 years ago

Rafi, why do you consider "sticky" as the proper class for fixed top bar? I consider it proper in cases when "top bar" is located somewhere in the middle of the page, not very top, and there is a need to make it fixed from there. It's all here http://foundation.zurb.com/docs/components/topbar.html

Besides, if the top bar is located at the very top of the page and "sticky" is in use, top bar flickers once at when scrolling. It's not happening with "fixed" class.

I found this http://foundation.zurb.com/forum/posts/214-foundation-5-menutop-bar-toggle-not-working-in-small-screens It's still not fixed.