Foundation responsive menu shows "mobile" version regardless

sage
1

I’m just using boilerplate Foundation 6 responsive menu markup as demonstrated. https://foundation.zurb.com/sites/docs/top-bar.html#advanced-layout

Running yarn start– in development, no matter the screen size, the primary nav is hidden and the toggle button is always shown even though data-responsive-toggle="responsive-menu" data-hide-for="medium" is specified.

Running yarn build– for production, the menu behaves correctly.

In development, there are no errors in the console other than missing main.css – which is a webpack thing.

I also tried deleting the contents of the .cache loader

2

From what I gather, there seems to be an issue with how Foundation handles media queries in respect to some of its components and how things get hot loaded via webpack. https://github.com/roots/sage/issues/2124

Is there a better way to resolve this for development? Other than adding jQuery(window).on('load', () => Foundation.MediaQuery._init()); to resources/scripts/autoload/_foundation.js – this solution isn’t 1:1 with production.