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
  • 186 Views
  • 41 Minutes Discussion Span
  • Latest Post Latest Post by arunpawar

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: http://foundation.zurb.com/docs/components/top-bar.html

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.