Zurb Top Nav Bar drop-down not working on small screen when dynamically included

Question

I am trying to get my head around Zurb Foundation's Top Navigation bar. I struggled to get it working first time around when I was including the navigation mark-up via a js include. When I copied the code into each html page it suddenly worked. This was fine, but I have added a new section to my site where the pages are dynamically formed with ruby.

The actual issue is that when a screen is small, the drop-down menu at the top right of the page stops working.

On the front page of my site, the navigation works on a small screen: Mac Media Production home page, however on this page: Mac Media Production Hosting page, the navigation bar no longer operates correctly, and as far as I am aware the mark-up is the same:

<!-- Header and Nav -->

<nav class="top-bar">
  <ul>
    <!-- Title Area -->
    <li class="name">
      <h1>
        <a href="http://www.mac-media.co.uk">
          mac media
        </a>
      </h1>
    </li>
    <li class="toggle-topbar"><a href="http://www.mac-media.co.uk/hosting"></a></li>
  </ul>

  <section>
    <!-- Top Right Nav Section -->
    <ul class="right">

      <li class="has-dropdown">
        <a class="active" href="http://www.mac-media.co.uk/index.html">Menu</a>
        <ul class="dropdown">
          <li><label>Pages</label></li>
          <li><a href="http://www.mac-media.co.uk/index.html">Home</a></li>
          <li><a href="http://www.mac-media.co.uk/contact-us.html">Contact Us</a></li>
          <li class="divider"></li>
          <li><label>Our Services</label></li>
          <li><a href="http://www.mac-media.co.uk/web-design.html">Web Design</a></li>
          <li><a href="http://www.mac-media.co.uk/photo.html">Photo</a></li>
          <li><a href="http://www.mac-media.co.uk/video-production.html">Video</a></li>
          <li><a href="http://www.mac-media.co.uk/hosting.html">Hosting</a></li>
          <li><a href="http://www.mac-media.co.uk/email.html">Emails</a></li>
          <li><a href="http://www.mac-media.co.uk/domain-names.html">Domain Names</a></li>
          <li class="divider"></li>
          <li><label>Existing Clients</label></li>
          <li><a href="http://www.mac-media.co.uk/hosting/front-page">Control Panel</a></li>
          <li><a href="http://www.outitgoes.com/">Webmail Login</a></li>
        </ul>
      </li>
        <li class="divider hide-for-small"></li>
    </ul>

         </section>

</nav>

Can anyone help please!?

JAMESSTONEco JAMESSTONEco · Accepted Answer · 2013-03-04T01:39:34

In ZURB Foundation 3, this line:

<li class="toggle-topbar"><a href="http://www.mac-media.co.uk/hosting"></a></li>

should be changed to:

<li class="toggle-topbar"><a href="#"></a></li>

This is just a placeholder for jQuery

Official Docs: http://foundation.zurb.com/old-docs/f3/navigation.php

Zurb Top Nav Bar drop-down not working on small screen when dynamically included

1 Answers