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! :)

Answer 1

There seems to be couple of issues:

1. In you app.js , move $(document).foundation(); inside $(document).ready(function(){}); .

2. 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.

3. Either use foundation.js (normal) or foundation.min.js (minified), but don't use both if they are same.

4. Try removing plugins one at a time, and identify first, which plugin is causing issue with the navigation.

5. 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

6. As per your comment, problem lied in foundation.js and getting the latest one from foundation.js resolved it.