Foundation Responsive Top Bar Toggle Not Working In Rails 3.2.8 Project

Question

I'm a front-end web developer working on my first serious rails project (v3.2.8). I've successfully installed Foundation version 3.2.0 using the gem.

I am having trouble with the navigation toggle, which appears on smaller screen sizes and is used to expand and collapse the navigation links. When I click on it, it does nothing.

(You can see the documentation for the responsive zurb nav on their website: http://foundation.zurb.com/docs/navigation.php ).

The code in question is:

<nav class="top-bar">
   <ul>
      <li class="toggle-topbar">
         <a href="#"></a>
      </li>  
   </ul>  
   <section>
      <ul class="right">
         <li class="has-dropdown">
            <%= link_to "#{@user.email} | #{@user.credits_count}", 
               dashboard_path, :class => 'first-link' %>
            <ul class="dropdown">
               <li>
                  <a href="#">Settings<i class="icon-cog"></i></a>
               </li>
               <li>
                  <a href="#">Downloads<i class="icon-cloud-download"></i></a>
               </li>
               <li>
                  <a href="#">Subscription<i class="icon-calendar"></i></a>
               </li>
               <li>
                  <%= link_to 'Purchase Credits <i class="icon-money"></i>' 
                      .html_safe, credits_path %>
               </li>
               <%= render "shared/menu_bar" %>                 
            </ul>
         </li>
      </ul>
   </section>
</nav>

The odd part is, when I remove:

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

... Everything works as it should, but the first link:

<%= link_to "#{@user.email} | #{@user.credits_count}", 
             dashboard_path, :class => 'first-link' %> 

... appears twice - Once where the actual toggle arrow should be and again once you click it to expand the navigation links.

Why would the navigation work properly when the toggle is not in the code and malfunction when it is?

Any help would be greatly appreciated.

Answer 1

I found this answer on another forum. https://groups.google.com/forum/#!topic/foundation-framework-/-5F_kQWfNQ4

Put the following in the html:

<script src="http://foundation.zurb.com/public/assets/marketing_docs.js"></script>

And at least for me, the dropdown now works...

EDIT: as of Foundation 5 the marketing_docs file is no longer available

I'm currently trying to understand why the toggle isn't working.