CODEWITHSUNDEEP
zurb-foundation
Nicholas Ritson
Nicholas Ritson

Reputation: 909

Foundation 5 Top Navbar doesnt drop down on mobile

so having some problems with Foundation 5 on the website example, when the browser is resized to mobile the nav menu shows the 3lines and menu button and on their site its clickable and drops down to show the menu, when i copy pasted their code, my button when clicked just reloads the page, how do i fix this? is something not loading correctly?

i experienced similar problems with the dropdown button this one: http://foundation.zurb.com/docs/components/dropdown.html

where it wont drop down and show the content even if im using the copy pasted one from their site.

currently im loading these:

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">
  <link rel="stylesheet" href="css/style.css?v=1">
  <!-- Modernizr Script for Foundation 5 -->
  <script src="js/vendor/modernizr.js"></script>
  <!-- Foundation Top Bar -->
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation.dropdown.js"></script
  <script src="js/foundation/foundation.topbar.js"></script>
  <script src="js/foundation/foundation.offcanvas.js"></script>

and my html is this:

<header>              

<nav class="top-bar" data-topbar="">
      <ul class="title-area">
        <li class="img-wrapper">
          <a href="#"><img src="img/logo.png"></a>
        </li>
        <li class="toggle-topbar menu-icon"><a href="">Menu</a></li>
      </ul>


    <section class="top-bar-section" style="left: 0%;">

        <!-- Right Nav Section -->
        <ul class="right show-for-large-up">
          <li class="active"><a href="#">Right Button Active</a></li>
          <li class="has-dropdown not-click">
            <a href="#">Right Button Dropdown</a>
            <ul class="dropdown"><li class="title back js-generated"><h5><a     href="javascript:void(0)">Back</a></h5></li>
              <li><a href="#">First link in dropdown</a></li>
            </ul>
          </li>
        </ul>

      </section></nav>

   </header>

The drop down button looks like this:

     <a href="#" data-dropdown="drop1">DROP DOWN BUTTON</a>
     <ul id="drop1" class="f-dropdown" data-dropdown-content>
       <li><a href="#">This is a link</a></li>
       <li><a href="#">This is another</a></li>
       <li><a href="#">Yet another</a></li>
     </ul>

am i doing something wrong? i am not using the minified js script, im using the foundation.js one.

any help would be greatly appreciated.

EDIT: Found the problem facepalm was loading the scripts in the header instead of end of the page, when its at the end it works 100%.

Upvotes: 0

Views: 1222

Answers (1)

Adrift
Adrift

Reputation: 59859

You have a few problems:

  1. jQuery must be included before loading foundation.js
  2. You're including the individual plugins and the foundation.js file - only the latter is needed (it already includes the plug ins).

  3. You have to initialize the foundation plugins:

    <script>     
    $(document).foundation();
</script>

Upvotes: 1

Related Questions