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.