Menu icon Foundation
How to use topbar

Tried to use Top Bar, read the information I found in the docs section then copied and pasted the sample code into my test file I had setup. Then tested it and it was a mess, tried many things, studied the docs, the code, etc but nothing worked.

Foundation has a working top bar menu example in the Top Bar section of the docs worked so I viewed the page source in chrome and studied it. Decided to use their code and files, css, js files. After setting my test page up to match foundations use of Top Bar it magically started working. I further found that they are using a css file called docs.css which makes a huge difference in the successful use of top bar.

What does all this mean, does it mean I have missed something that everybody else knows, does it mean that the information in the foundation docs section and sample code on their site is wrong?

topbar

Tried to use Top Bar, read the information I found in the docs section then copied and pasted the sample code into my test file I had setup. Then tested it and it was a mess, tried many things, studied the docs, the code, etc but nothing worked.

Foundation has a working top bar menu example in the Top Bar section of the docs worked so I viewed the page source in chrome and studied it. Decided to use their code and files, css, js files. After setting my test page up to match foundations use of Top Bar it magically started working. I further found that they are using a css file called docs.css which makes a huge difference in the successful use of top bar.

What does all this mean, does it mean I have missed something that everybody else knows, does it mean that the information in the foundation docs section and sample code on their site is wrong?

Alex Smith over 5 years ago

Hi Phil,

Without seeing your code there's no way to I can tell what may be happening. However, I too have had this issue (more than once) but for me it always came down to my code not being correctly set up.

Here's a complete working example using the top bar code from the docs. I've simply stripped out everything within the index.html file that comes with the standard Foundation 5 download and placed the code within it.

Simply copy this code into a blank file and save it as top-bar-example.html. For the purposes of this example, I'd recommend saving the file in the same Foundation download folder that contains their sample index.html file - just so you know all file paths connected.

After checking it out in a browser and confirming that it works, compare it to your code to see if you can find what may be causing the issue.

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/modernizr.js"></script>
</head>
<body>

<div class="row">
  <div class="large-12 columns">
    <h1>Welcome to Foundation</h1>
  </div>
</div>

<div class="row">
  <div class="large-12 columns">

    <!-- Start Foundation 5 Top Bar Navigation -->
    <nav class="top-bar" data-topbar>
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">My Site</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 class="active"><a href="#">Right Nav Button Active</a></li>
          <li class="has-dropdown"> <a href="#">Right Button with Dropdown</a>
            <ul class="dropdown">
              <li><a href="#">First link in dropdown</a></li>
            </ul>
          </li>
        </ul>
        <!-- Left Nav Section -->
        <ul class="left">
          <li><a href="#">Left Nav Button</a></li>
        </ul>
      </section>
    </nav>
    <!-- End Foundation 5 Top Bar Navigation -->

  </div>
</div>

<script src="js/jquery.js"></script> 
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>

</body>
</html>

Hope that helps!

Rafi Benkual over 5 years ago

Hi Phil,

We tested the above code and it works great. If you still need help, please post your code including what is in the head tags.