Dropdowns not working on large screen but okay on small screen

[LindaBrennan]

Thank you so much for this great responsive menu!

I’m building my first responsive website, using the Foundation 5 framework for the first time. I’m very new to jQuery. I’ve included your SmartMenus menu in two places in my HTML: in one place for small devices and in another place for large devices, because I’m wrapping the small device menu in an off-canvas container so that it slides in from the left (using Foundation’s off-canvas JavaScript).

Everything works fine except for one thing: the dropdown submenus on the horizontal menu that displays for large devices do not display. The top-level links in the menu display fine, just not the dropdowns. But when I reduce my browser and view the small menu, the accordion works and the submenus display perfectly.

If I remove the off-canvas small menu, then the dropdowns display fine on the horizontal large menu. So I’m wondering whether this issue has something to do with using the menu twice on the same page? Maybe the jQuery is working for the small menu (that comes first in the HTML) but not for the large menu?

Any help is very much appreciated!

[LindaBrennan]

I’ve figured it out. I forgot to call the SmartMenus jQuery twice. So it was only running for the first (small) menu. It worked when I gave the large menu a different ID than the small one, then used that ID in the second jQuery call. There’s probably a more elegant way to do this – I’m happy for suggestions and also happy to share my code if anyone else is new to jQuery or using Foundation 5.

[LindaBrennan]

Duh, removed the IDs and used classes instead, only have to call the function once and it runs for both instances of the class.

[LindaBrennan]

.

[Author]

Posts