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?
Thanks so much for any insight you can offer.