Foundation's top-bar, the toggle won't work

Question

Following the instructions from here:

The top bar has four main elements, three of which are needed for proper functionality: ul.title-area, a ul class="right/left element enclosed in a section class="top-bar-section", and the li.toggle-topbar element that will expand the menu in the mobile layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.

http://foundation.zurb.com/docs/components/top-bar.html

I created this layout (this is the generated HTML that my wordpress theme loads):

<header id="masthead" class="site-header" role="banner">
  <nav id="site-navigation" class="navigation-main top-bar row" role="navigation">
    <ul class="title-area small-12 large-6 columns">
      <!-- Title Area -->
      <li class="name">
        <!--h1 class="menu-toggle"-->
        <h1>
          <img src="http://ns2101.boxqos.com/wp-content/uploads/2013/04/logo.png" id="logo_image" alt="Phoenix Concept" />
        </h1>
        <!-- 
<div class="screen-reader-text skip-link">
<a href="#content" title="Skip to content">
Skip to content
</a>
</div>
-->
            </li>
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon">
              <a href="#">
                <span>
                  Menu
                </span>
              </a>
            </li>
          </ul>
          <section class="top-bar-section small-12 large-6 columns">
            <ul id="menu-menu" class="left">
              <li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-333">
                <a href="http://ns2101.boxqos.com/offnungszeiten/">
                  Öffnungszeiten
                </a>
              </li>
              <li id="menu-item-334" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-334">
                <a href="http://ns2101.boxqos.com/unser-restaurant/">
                  Unser Restaurant
                </a>
              </li>
              <li id="menu-item-335" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-335">
                <a href="http://ns2101.boxqos.com/willkommen/">
                  Willkommen
                </a>
              </li>
              <li id="menu-item-339" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-337 current_page_item menu-item-339">
                <a href="http://ns2101.boxqos.com/kontakt/">
                  kontakt
                </a>
              </li>
              <li id="menu-item-340" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-340">
                <a href="http://ns2101.boxqos.com/blog/">
                  Blog
                </a>
              </li>
            </ul>

            <script>
              $('.top-bar-section li').addClass('small-12 large-4');
              $('.top-bar-section').addClass('small-12 large-4');
            </script>
          </section>
  </nav>
  <!-- #site-navigation -->
</header>
<!-- #masthead -->

And I have included foundation's app:

$(function(){
        $(document).foundation(); 

})

The problems is that the toggle for the top navigation when the window resizes won't work....

http://ns2101.boxqos.com/kontakt/#

Any idea what I'm misssing?

Answer 1

Your issue is due to the toolbar script not loading. You either need to reference foundation.topbar.js or foundation.min.js and then make sure they are loaded . Use firebug in FF or the Dev. console in Chrome to see your site's issue with Foundation.