How to fix topbar dropdown menu links not working in Foundation 6

Question

I have never used Foundation 6 before and after building an entire website on it, I realized the links in my topbar's drop down menu do not work. I searched for an answer to this question everywhere and I have seen so many different answers. Some say to download a newer version of foundation.min.js, some say to download a newer version of foundation.topbar.js, and others think this issue cannot be solved.

Below is some of code (my website can be found at http://littleeternities.com so that you can see for yourself what I mean by the links not "working").

TopBar Code

    <!--Navigation-->
    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-     for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="main-menu">
  <div class="top-bar-left">
    <ul class="dropdown menu" data-dropdown-menu>
      <li><a href="#">Home</a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
      <li class="has-submenu">
        <a href="#">About</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Portfolio</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Services</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">Pricing</a></li>
          <li><a href="#">Custom Blog Design</a></li>
          <li><a href="#">Custom Web Design</a></li>
           <li><a href="#">Pre-Made Templates</a></li>
         <li><a href="#">Branding Packages</a></li>
        <li><a href="#">Web-Hosting</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Courses</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">Perfect Your Business Plan</a></li>
      <li><a href="#">Kickstart Your Badass Online Business</a></li>
      <li><a href="#">Digital Innovator</a></li>
       <li><a href="#">More Courses</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Free</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">Kickstart Your Badass Business Checklist</a></li>
      <li><a href="#">FREE Course: Build a Better Business in 7 Days</a></li>
      <li><a href="#">Business Brainstorming Workbook</a></li>
      <li><a href="#/">8 Business Tools to Use</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>
<!-- /navigation -->

Here are the scripts added

<script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/what-input/what-input.js"></script>
    <script src="../bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="../js/app.js"></script>
   <script src="../bower_components/foundation-sites/dist/foundation.min.js"></script>
  <script src="../js/foundation.topbar.js"></script>
<script src="../bower_components/foundation-sites/js/foundation.offcanvas.js"></script>

In the file app.js, the following JavaScript is written

$(document).foundation();

$(document).ready(function() {

});

I have tried every method thus far to fix this, now I'm just stuck. Any answers will be uber appreciated! :)

Shouldn't it be? `$(document).ready(function() { $(document).foundation(); });` So that foundation service is called on `DOM` ready. — Parkash Kumar, Dec 28 '15 at 04:54
@ParkashKumar Thanks! I updated the app.js file with your code and its still not working. Do you advise something else? — Zobia Alvi, Dec 28 '15 at 04:58
There is another issue in you `app.js`. This one: `Uncaught TypeError: $(...).owlCarousel is not a function` Either add owl-carousel plugin or comment this code, if you are not using. — Parkash Kumar, Dec 28 '15 at 05:03
Also, you have `foundation.js` and `foundation.min.js`. Aren't they same? If both are sources of same plugin (normal & minified), remove one. — Parkash Kumar, Dec 28 '15 at 05:07
@ParkashKumar I see, I removed the OwlCarousel plugin and deleted the minified version of the foundation plugin. Issue still exists. — Zobia Alvi, Dec 28 '15 at 05:12
Try removing plugins one by one, and identify first, which plugin is causing issue with the navigation. — Parkash Kumar, Dec 28 '15 at 05:21
There seems to be issue with the sequence of the plugins used. Re-arrange it as, `1. jquery.js, 2. foundation.topbar.js, 3.what-input.js, 4.foundation.min.js, 5.foundation.offcanvas.js` and finally `app.js`. — Parkash Kumar, Dec 28 '15 at 05:23
Also, it would be suitable, if you create fiddle for further investigation. — Parkash Kumar, Dec 28 '15 at 05:23
@ParkashKumar I did exactly what you said - remove plugins one at a time and I found that the problem lied in the foundation.js file. It turns out the plugin version was incorrect so I went over to https://github.com/zurb/foundation-sites/blob/develop/dist/foundation.js and downloaded the correct one and it worked! Thanks so much for your help! Go ahead and write it as an answer so I could up vote it! :) — Zobia Alvi, Dec 28 '15 at 05:56
Sure, I am wrapping my comment in an answer, so that it might be useful for other in future. — Parkash Kumar, Dec 28 '15 at 05:58
One thing more, add `foundation.topbar.js` after `foundation.min.js`, as it is dependent on it. — Parkash Kumar, Dec 28 '15 at 06:13

Parkash Kumar · Accepted Answer · 2015-12-28T06:12:10.713

There seems to be couple of issues:

In you app.js, move $(document).foundation(); inside $(document).ready(function(){});.
Resolve Uncaught TypeError: $(...).owlCarousel is not a function being initiated from app.js, Either add owl-carousel plugin or comment this code, if you are not using.
Either use foundation.js (normal) or foundation.min.js (minified), but don't use both if they are same.
Try removing plugins one at a time, and identify first, which plugin is causing issue with the navigation.
There seems to be issue with the sequence of the plugins used. Re-arrange it as,
i. jquery.js, ii. what-input.js, iii. foundation.min.js, iv. foundation.topbar.js, v. foundation.offcanvas.js vi. app.js
As per your comment, problem lied in foundation.js and getting the latest one from foundation.js resolved it.

@Zobia Alvi, I have posted my comments as answer, correct me if I am wrong. — Parkash Kumar, Dec 28 '15 at 06:09
That's perfect! Thank you so much! I was so lost with Foundation. :) — Zobia Alvi, Dec 28 '15 at 07:07

How to fix topbar dropdown menu links not working in Foundation 6

1 Answers1