Member Avatar for arunpawar

Hi, I am trying to get the top navigation of zurb foundation to work but for some reason it is not working for me. Here's my code.

What seems to be issue?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />

  <meta name="viewport" content="width=device-width" />


  <link rel="stylesheet" href="css/normalize.css" />

  <link rel="stylesheet" href="css/foundation.css" />


<script type="text/javascript" src="js/vendor/custom.modernizr.js">
</script>

  <title>Zurb Demo </title>

</head>

<body>

<div class="large-12 columns">
<nav class="top-bar">
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name"><h1><a href="#">Top Bar Title</a></h1></li>
      <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><a href="#">Main Item 1</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>
            <li><a href="#">Dropdown Option</a></li>


       </ul>
    </section>
  </nav>
  </div>

  <!-- End Top Bar -->

<!-- end of sticky header -->




</body>
</html>

any idea how to make the zurb foundation 4 top nav bar to work?

  • 2 Contributors
  • 2 Replies
  • 196 Views
  • 41 Minutes Discussion Span
  • Latest Post Latest Post by arunpawar

Dani AI

Generated

Quick summary for : the top-bar markup in the snippet looks close to the docs, but the interactive behavior requires Foundation’s JavaScript (and either Zepto or jQuery) plus an initialization call. In many cases where the CSS appears but the menu button or dropdowns don’t do anything, the missing pieces are (a) jQuery/Zepto + foundation JS (or the topbar plugin), (b) the data-topbar attribute on the <nav> element, and (c) a call to initialize Foundation. (get.foundation)

Suggested minimal additions (put scripts just before </body>):

<nav class="top-bar" data-topbar role="navigation">
  ...existing markup...
</nav>

<!-- before </body> -->
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>
<script>$(document).foundation();</script>

Using the combined foundation.min.js in place of the two foundation files is fine; the important part is correct order: jQuery (or Zepto) → foundation core → topbar plugin → initialization. (get.foundation)

Troubleshooting checklist (expands on ’s path/devtools suggestion): check the DevTools Console for errors such as "$ is not defined" or $(document).foundation is not a function and the Network tab for 404s on JS files; confirm only one copy of jQuery is loaded and that CSS and JS are from the same Foundation version (mixing v4/v5 assets breaks behavior). If testing from the file:// protocol, try using a simple local server so relative paths behave predictably. (stackoverflow.com)

Note about Zepto vs jQuery: Foundation 4 can use Zepto by default but works with jQuery as well—forcing a known jQuery file often avoids subtle compatibility issues during local testing. (stackoverflow.com)

Final caution: if the top-bar still does nothing after the above, inspect the menu items for the required dropdown markup (li.has-dropdown + ul.dropdown) when dropdowns are expected; that markup is needed for the plugin to attach dropdown behavior. (get.foundation)

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

I'm not particularly familiar with this product but what always comes to mind to first check is the paths to the external files.

Are these the correct paths? You are sure the files are there?

<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/foundation.css" />
<script type="text/javascript" src="js/vendor/custom.modernizr.js">

Also, have you checked for any errors using your browser's dev tools? Errors would be displayed in the Console tab of the toolset.

Do you have a sample online somewhere where we can see it live?

Foundation Documentation: Navigation | Top Bar:

Member Avatar for arunpawar

I don't have the live sample (as in hosting) I am doing this on local level. I checked the path and it does work fine because rest of the components are loading without any issue. e.g. css for the topnav and other elements. Same for JS. And I didn't see any error on browser either I checked the web developer addon and there seems to be no issues, which is weird.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.