title: Zurb Foundation top-bar not working on small screens
body: <p>I just started using foundations and frankly, its been a while since i built my last website. so please be pacient with me.</p>
  
  <p>I deal with an issue with my menu (top-bar) now for over a day and can not find a clue what is going wrong.</p>
  
  <p>The thing is, I really just need a basic menu, which is toggeling to the standard burger-menu on small screens, so far so good, it should work like demonstrated in the documentation right? But unfortunatly it does not and I cant figure out why.</p>
  
  <p>I hope you can help me. I add my code without contents below. The file lies in a subdirectory, thats why all directory references are with ../ at the beginning.</p>
  
  <p>Thanks a lot already! 
  Ina</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js" lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Inas | Ernährungs Coaching&lt;/title&gt; 
      &lt;link rel="stylesheet" href="../css/foundation.css" /&gt;
      &lt;link rel="stylesheet" href="../css/additionals.css" /&gt;
      &lt;script src="../js/vendor/modernizr.js"&gt;&lt;/script&gt;
  
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div id="wrap"&gt;
      &lt;div id="header"&gt;
          &lt;div class="row"&gt;
            &lt;div class="large-12 columns clearfix"&gt;
              &lt;!-- a header --&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="row"&gt;
              &lt;div class="small-12 columns"&gt;
                  &lt;!-- Navigation --&gt;
                  &lt;div class="contain-to-grid sticky"&gt;
                      &lt;nav class="top-bar data-topbar" &gt;
                          &lt;ul class="title-area" &gt;
                              &lt;li class="name"&gt;
                                  &lt;h1&gt;&lt;/h1&gt;
                              &lt;/li&gt;
                              &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;span&gt;Men&amp;uuml;&lt;/span&gt;&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
  
  
                          &lt;section class="top-bar-section"&gt;
                              &lt;ul&gt;
                                &lt;li&gt;&lt;a href="index.php"&gt;Start&lt;/a&gt;&lt;/li&gt;
                                &lt;li class="divider"&gt;&lt;li&gt;
                                &lt;li&gt;&lt;a href="index.php?page=angebot"&gt;Angebot&lt;/a&gt;&lt;/li&gt;
                                &lt;li class="divider"&gt;&lt;li&gt;
                                &lt;li&gt;&lt;a href="index.php?page=aktuelles"&gt;Aktuelles&lt;/a&gt;&lt;/li&gt;
                                &lt;li class="divider"&gt;&lt;li&gt;
                                &lt;li&gt;&lt;a href="index.php?page=mich"&gt;&amp;Uuml;ber Mich&lt;/a&gt;&lt;/li&gt;
                                &lt;li class="divider"&gt;&lt;li&gt;
                                &lt;li&gt;&lt;a href="index.php?page=kontakt"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/section&gt;
                      &lt;/nav&gt;
                  &lt;/div&gt;&lt;!-- /navigation --&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
      &lt;div id="main"&gt; 
          &lt;!-- some content --&gt;
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;   
          &lt;!-- a footer --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
     &lt;script src="../js/vendor/jquery.js"&gt;&lt;/script&gt;
     &lt;script src="../js/foundation.js"&gt;&lt;/script&gt;
     &lt;script src="../js/foundation/foundation.topbar.js"&gt;&lt;/script&gt;
     &lt;script&gt;
     $(document).foundation();
     &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>