Zurb Foundation Top-bar Dropdown and Menu not working

1
votes
<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Welcome</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="has-dropdown">
        <a href="#">Hello, User</a>
        <ul class="dropdown">
          <li><a href="#">Settings</a></li>
          <li class="active"><a href="#">Log Out</a></li>
        </ul>
      </li>
    </ul>

  </section>
</nav>

I have two issues.

  1. The dropdown doesn't work in full screen. Hovering/clicking 'Hello, User!' doesn't do anything for me. When I inspect element, it seems like the drop down is given -100% positioning.

section class="top-bar-section" style="left: -100%;

2.When I resize my screen, the menu text and icon shows up, but 'Hello, User' appears below it instead of appearing only when you click Menu. Clicking menu does nothing.

Any help will be appreciated!

1
htmlcsszurb-foundation

1 Answers

1
votes

Your foundation code is 100% correct. It looks as if you are missing the JQuery that the dropdown depends on or it is not firing correctly. Please look into that and if you still have issues post your entire page of code including head tags.