Menu icon Foundation
Top Bar Drop-Down Does not Work

Working on a small project (combining WP and F5) and it appears my drop-down menus are not working in the medium/large range - however, everything works like a charm in the mobile/small range.

Other JS elements appear to be working fine, which makes this one a bit confusing. I also double checked the code and it appears to be setup correctly.

http://jointswp.com/demo/features/

navigationtop barDrop Down Menu

Working on a small project (combining WP and F5) and it appears my drop-down menus are not working in the medium/large range - however, everything works like a charm in the mobile/small range.

Other JS elements appear to be working fine, which makes this one a bit confusing. I also double checked the code and it appears to be setup correctly.

http://jointswp.com/demo/features/

Paul Dumitru Purcel almost 6 years ago

I have the same problem , everything works but not the dropdowns if you find a fix please post it here please

Paul Dumitru Purcel almost 6 years ago

OK I've solve the problem so if you use the minimized version of foundation (foundation.min.js) do not load other plugins , because they are loaded automatically , and it will work .

We need to read the documentation more carefully next time !

Have fun !

Jeremy Englert almost 6 years ago

That's awesome you got that worked out! However, my issue remains. I was only loading the minimized script in the first place.

Anyone have any ideas?

http://jointswp.com/demo/features/

Thomas E. Vasquez almost 6 years ago

Hi Jeremy,

I created WP-Forge which is a WordPress theme built with Foundation. I ran into the same issue with the drop downs not working. I am also loading the min version.

Originally I had this in my top bar:

```

and the drop downs were not working. So I changed it to reflect this:


```<nav class="top-bar" data-topbar>

now they seem to be working. Hope this helps you out.

Jeremy Englert almost 6 years ago

Thomas - thank you for the reply, and I'm definitely going to check out your theme.

However, your code did not seem to come through the forum very well. Any chance you could re-paste it in?

HUGE thanks!

Archeon almost 6 years ago

make sure your nav class tag includes both class="top-bar" and data-topbar like the sample code.
In version 4 you didn't seem to need the "data-topbar" which tripped me up.

Steve King over 5 years ago

I know this is a little late for a reply, but did you ever fix this issue? I had the same issue myself!

With Jointswp the reason this is happening is because you havent assigned the menu. If you go to Appearance => Customize. Then the little preview box. If you go to "Navigation" and assign the menu you are trying to use.

This is what fixed my issue anyway, I tried all the other ways. Checking if the data-topbar was there, making sure there were no JS conflict etc etc. In the end it was a simple assign the menu!

Hope his helps! And sorry for late reply too!

Jorge Hellsten about 5 years ago

Hi!
I had the same problem, I noticed that I'd changed

 <section class="top-bar-section">
to
<div class="top-bar-section">

because I think its more semantic.
section requires a heading which I did'nt have, so now I use

<section class="top-bar-section">
<h1 hidden>Top-bar</h1>

And It works!

Carlos Morales about 5 years ago

Thank you Jorge! I was having some issues with the dropdown positioning on mobile and it got solved changing the div to section.

Joel Kinzel about 5 years ago

If you don't want to use the element (which I agree shouldn't be used in this case), I believe you can use the class section as well. Example:

<div class="section top-bar-section">

leo_haldan almost 5 years ago

Guys My issue is that the top bar drop down seems to be loading behind my background div and is not visable. But when I make the top bar height large, it appears. Any help?

Elyasin Shaladi over 4 years ago

I actually have the same issue as leo_haldan.

Did you find a fix for this?

George about 4 years ago

Added this line to my CSS and it worked like a charm :)

nav.top-bar.expanded {z-index: 1000;}

YUKI URATA almost 4 years ago

test

Adam Pery over 3 years ago

I found:

.top-bar {
    overflow: hidden;
}

This makes dropdown menu invisible. In addition, the "row" and "columns" class have "overflow: hidden;"

shaquel almost 3 years ago

Hey guys this tutorial here will answer all your questions

https://www.youtube.com/watch?v=qO0RIG2nABM