# Foundation responsive menu shows "mobile" version regardless

**URL:** https://discourse.roots.io/t/foundation-responsive-menu-shows-mobile-version-regardless/15667
**Category:** sage
**Tags:** webpack
**Created:** 2019-05-27T15:06:04Z
**Posts:** 2

## Post 1 by @djmtype — 2019-05-27T15:06:04Z

I’m just using boilerplate Foundation 6 responsive menu markup as demonstrated. [https://foundation.zurb.com/sites/docs/top-bar.html#advanced-layout](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

---

## Post 2 by @djmtype — 2019-05-27T16:22:00Z

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](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.