Databases
StackOverflow2013
Postsdbo
POFoundation Zurb 4 Top Bar Not Dropping Down
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFoundation Zurb 4 Top Bar Not Dropping Down
    text
    copied!<p>I am using Zurb Foundation 4 and my top bar navigation is not dropping down. I know my files are linking correctly, I'm not getting any console errors and my divs are falling into place when resizing my browser, which means my Foundation files are linked correctly. My top bar even collapses when I resize to a certain point, which is what I want.</p> <p>The drop down menus don't work. Both when I collapse my nav and then click it to try and expand, nothing happens, and also when I just roll over my buttons nothing happens at all. </p> <p>Head: </p> <pre><code> &lt;script src="jquery-1.10.2.min.js"&gt;&lt;/script&gt; &lt;script src="js/foundation.min.js"&gt;&lt;/script&gt; &lt;script src="js/foundation/foundation.topbar.js"&gt;&lt;/script&gt; </code></pre> <p>And Body </li> Menu</li> </p> <pre><code>&lt;section class="top-bar-section"&gt; &lt;!-- Right Nav Section --&gt; &lt;ul class="right"&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li class="has-dropdown"&gt; &lt;a href="#"&gt;Main Item 4&lt;/a&gt; &lt;ul class="dropdown"&gt; &lt;li&gt;&lt;label&gt;Section Name&lt;/label&gt;&lt;/li&gt; &lt;li class="has-dropdown"&gt; &lt;a href="#" class=""&gt;Has Dropdown, Level 1&lt;/a&gt; &lt;ul class="dropdown"&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown Options&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown Options&lt;/a&gt;&lt;/li&gt; &lt;li class="has-dropdown"&gt; &lt;a href="#"&gt;Has Dropdown, Level 2&lt;/a&gt; &lt;ul class="dropdown test"&gt; &lt;li&gt;&lt;a href="#"&gt;Subdropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Subdropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Subdropdown Option&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Subdropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Subdropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Subdropdown Option&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;label&gt;Section Name&lt;/label&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;See all &amp;rarr;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Main Item 5&lt;/a&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li class="has-dropdown"&gt; &lt;a href="#"&gt;Main Item 6&lt;/a&gt; &lt;ul class="dropdown"&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Dropdown Option&lt;/a&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;See all &amp;rarr;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/section&gt; </code></pre> <p></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload