Foundation v6.6.3 Responsive Menu Toggle

I am currently triaging a WordPress site that unwisely used a plugin to render the mobile navigation. The site has some issues and is a bit of a mess but as a step in the right direction, I have implemented the Foundation Responsive Menu plugin v6.6.3 with title bar on mobile widths but have come across something curious.

I’m using JSDelivr for asset delivery as this site does not employ a front-end build process.

The DOM is being rendered with an inline display:none on the .off-canvas HTML node. When a user opens the mobile nav the .menu-icon toggle event is fired and the inline style is updated to display:block, which is all well and good however, if a user for whatever reason closes the mobile nav without navigating to another page by triggering the .close-button toggle event, the inline display:block IS NOT updated to display:none. Everything appears to be working properly as the .is-open and .is-closed classes are toggled correctly on the .off-canvas node so the mobile menu does close. But should the user decide to open the mobile nav again the display:none and display:block are out of sync with the .is-open and .is-closed classes.

So are the inline styles needed and necessary and if so what am I missing in this current implementation?

And I should say I have tried earlier versions down to 6.6.1, but all three seem to be rendering the display:none inline style on the .off-canvas node as the DOM is rendered.

And just as a bit of a sanity check I am currently building another Wordpress site with a front end build process that uses Foundation 6.6.3 via node modules and the issue described above does not happen, a user can be indecisive and open an close the mobile nav without issue.

Could it be an issue with the package itself delivered from JSDelivr that is writing these inline display styles?

Any thoughts?

Thanks so much for any insight you can offer.

If any styles are needed they are automatically added / applied by Foundation Sites itself.
You do not have to add any inline styles yourself.

Currently I can not reproduce this:

Did you maybe forget to add motion-ui?
Also it might be relevant when you call $(document).foundation(). It should normally happen on documentready.


is not correct, it should be wrapped in the documentready listener.

$(function() {
  // Handler for .ready() called.

Ok thx.

Yes MotionUI might be the missing piece.

I’ll also drop the init in a doc ready.

Thx for the guidance.