Menu icon Foundation
Having problem getting Top-Bar to work correctly

My first problem is getting the drop down to work correctly. Looking at my code below if I leave the closing /li
off of

    <li class="has-dropdown">  <a href="#">Customer</a></li> <--leave this off  
         

The drop down will work but if I add them they don't work.

My second problem is when I shrink the page down the menu items completely disperse and I get no menu or image to open up the menu for the small screen

  <nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Notary Accounting</a></h1>
    </li>
  </ul>
  <section class="top-bar-section"> <!-- Right Nav Section -->
    <ul class="lift">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="about.php">About us</a></li>
      <li><a href="profile.php">Profile</a></li>
      <li><a href="accounting.php">Accounting</a></li>
      <li class="has-dropdown">  <a href="#">Customer</a></li>
      <ul class="dropdown">
          <li><a href="#">Customer 1</a></li>
          <li><a href="#">Customer 2</a></li>
          <li><a href="#">Customer 3</a></li>
        </ul>
     <li class="has-dropdown"> <a href="#">Signings</a></li>
        <ul class="dropdown">
          <li><a href="signing.php">Signings 1</a></li>
          <li><a href="#">Signings 2</a></li>
          <li><a href="#">Signings 3</a></li>
        </ul>
      </li>
      <li class="has-dropdown"> <a href="#">Reports</a></li>
      <ul class="dropdown">
          <li><a href="#">Report 1</a></li>
          <li><a href="#">Report 2</a></li>
          <li><a href="#">Report 3</a></li>
        </ul>
    </ul>  </section>
</nav>          

         

topbar

My first problem is getting the drop down to work correctly. Looking at my code below if I leave the closing /li
off of

    <li class="has-dropdown">  <a href="#">Customer</a></li> <--leave this off  
         

The drop down will work but if I add them they don't work.

My second problem is when I shrink the page down the menu items completely disperse and I get no menu or image to open up the menu for the small screen

  <nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Notary Accounting</a></h1>
    </li>
  </ul>
  <section class="top-bar-section"> <!-- Right Nav Section -->
    <ul class="lift">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="about.php">About us</a></li>
      <li><a href="profile.php">Profile</a></li>
      <li><a href="accounting.php">Accounting</a></li>
      <li class="has-dropdown">  <a href="#">Customer</a></li>
      <ul class="dropdown">
          <li><a href="#">Customer 1</a></li>
          <li><a href="#">Customer 2</a></li>
          <li><a href="#">Customer 3</a></li>
        </ul>
     <li class="has-dropdown"> <a href="#">Signings</a></li>
        <ul class="dropdown">
          <li><a href="signing.php">Signings 1</a></li>
          <li><a href="#">Signings 2</a></li>
          <li><a href="#">Signings 3</a></li>
        </ul>
      </li>
      <li class="has-dropdown"> <a href="#">Reports</a></li>
      <ul class="dropdown">
          <li><a href="#">Report 1</a></li>
          <li><a href="#">Report 2</a></li>
          <li><a href="#">Report 3</a></li>
        </ul>
    </ul>  </section>
</nav>          

         
James Gehring over 5 years ago

I didn't check the drop down but for the menu toggle you are missing some code.

<ul class="title-area"> 
      <li class="name"> 
       <h1><a href="#">My Site</a></h1> 
      </li> 
      <li class="toggle-topbar menu-icon">
       <a href="#">Menu</a>
      </li> 
     </ul> 

Hope that helps.

James Gehring over 5 years ago

The drop down might be a CSS or Js problem. You have the right coding for it to work.

Rafi Benkual over 5 years ago

@james is right, you need the toggle topbar menu icon. Here is your code in a working example:
http://cdpn.io/HkCgf

We will need to see the rest of your code, like your JS loaded if this doesn't help.