title: Why Zurb Foundation Top Bar not functioning?
body: <p>I am learning Foundation 4.0 for a top bar design. My goal is just like the tutorial, to have slide effect of the menu item when the width goes narrower. I am following the document:
  <a href="http://foundation.zurb.com/old-docs/f3/navigation.php#topbarCode" rel="nofollow noreferrer">http://foundation.zurb.com/old-docs/f3/navigation.php#topbarCode</a></p>
  <pre><code>&lt;div class=&quot;row&quot;&gt;
  &lt;div class=&quot;twelve columns&quot;&gt;
  &lt;nav class=&quot;top-bar&quot;&gt;
    &lt;ul&gt;
      &lt;!-- Title Area --&gt;
      &lt;li class=&quot;name&quot;&gt;
        &lt;h1&gt;
          &lt;a href=&quot;#&quot;&gt;
            Top Bar Title
          &lt;/a&gt;
        &lt;/h1&gt;
      &lt;/li&gt;
      &lt;li class=&quot;toggle-topbar&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;section&gt;
      &lt;!-- Left Nav Section --&gt;
      &lt;ul class=&quot;left&quot;&gt;
        &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
        &lt;li class=&quot;has-dropdown&quot;&gt;
          &lt;a class=&quot;active&quot; href=&quot;#&quot;&gt;Item 1&lt;/a&gt;
          &lt;ul class=&quot;dropdown&quot;&gt;
            &lt;li&gt;&lt;label&gt;Section Name&lt;/label&gt;&lt;/li&gt;
            &lt;li class=&quot;has-dropdown&quot;&gt;
              &lt;a href=&quot;#&quot; class=&quot;&quot;&gt;Level 1, Has Dropdown&lt;/a&gt;
              &lt;ul class=&quot;dropdown&quot;&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 2&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;has-dropdown&quot;&gt;&lt;a href=&quot;#&quot;&gt;Level 2, Has Dropdown&lt;/a&gt;
                  &lt;ul class=&quot;dropdown&quot;&gt;
                    &lt;li&gt;&lt;label&gt;Section&lt;/label&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 3&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 3&lt;/a&gt;&lt;/li&gt;
                    &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 3&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 1&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
            &lt;li&gt;&lt;label&gt;Section Name&lt;/label&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Level 1&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;See all &amp;rarr;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;divider hide-for-small&quot;&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;!-- Right Nav Section --&gt;
      &lt;ul class=&quot;right&quot;&gt;
        &lt;li class=&quot;divider show-for-medium-and-up&quot;&gt;&lt;/li&gt;
        &lt;li class=&quot;has-dropdown&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Item 2&lt;/a&gt;
          &lt;ul class=&quot;dropdown&quot;&gt;
            &lt;li&gt;&lt;label&gt;Section Name&lt;/label&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;&quot;&gt;Level 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
            &lt;li&gt;&lt;label&gt;Section Name&lt;/label&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt;
            &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;See all &amp;rarr;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I used this code absolutely the same as my environment. However the menu goes like this:</p>
  <p><a href="https://i.stack.imgur.com/CRytJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CRytJ.png" alt="1" /></a></p>
  
  <p>It is not what I wish to have. Is anyone has the same problem as I have?</p>