Menu icon Foundation
F6 Sites - 'npm run build' menu issue

I recently noticed that with my responsive menu I have everything working fine and working correctly until I run 'npm run build' to get the compressed, production-ready code, my menu system changes.

I have a horizontal top-bar nav on medium/large and on mobile/small I have a title-bar that gives me a dropdown menu. Everything works as expected. If i just use my dist folder (without running 'npm run build') the site and menu look fine and continue to work as expected.

If I try to get the compressed code with 'npm run build', my menu will not show the medium/large horizontal menu. All i get is the mobile/small version of my menu. After some debugging time it looks like a style="display: none;" is getting applied to the wrong items after running the build.

When I inspect the non-run-build code I see the title-bar class has a style="display: none;" on medium/large screens, and the top-bar class doesn't have display setting.

When I inspect the run-build code I see the exact opposite. The title-bar class has no display setting, but the top-bar class now has the style="display: none;" applied to it.

So i know what is happening and why the wrong version of my nav is showing, I just dont know where the 'npm run build' is changing these display settings and how to fix it. Any input would be appreciated.

Thanks,

Jacob

F6buildnav

I recently noticed that with my responsive menu I have everything working fine and working correctly until I run 'npm run build' to get the compressed, production-ready code, my menu system changes.

I have a horizontal top-bar nav on medium/large and on mobile/small I have a title-bar that gives me a dropdown menu. Everything works as expected. If i just use my dist folder (without running 'npm run build') the site and menu look fine and continue to work as expected.

If I try to get the compressed code with 'npm run build', my menu will not show the medium/large horizontal menu. All i get is the mobile/small version of my menu. After some debugging time it looks like a style="display: none;" is getting applied to the wrong items after running the build.

When I inspect the non-run-build code I see the title-bar class has a style="display: none;" on medium/large screens, and the top-bar class doesn't have display setting.

When I inspect the run-build code I see the exact opposite. The title-bar class has no display setting, but the top-bar class now has the style="display: none;" applied to it.

So i know what is happening and why the wrong version of my nav is showing, I just dont know where the 'npm run build' is changing these display settings and how to fix it. Any input would be appreciated.

Thanks,

Jacob

Jacob Brooks over 3 years ago

** FOR ANYONE HAVING A SIMILAR ISSUE **

After looking into this issue more, it looks like its an UnCSS problem (which is what I thought), but currently there is not a fix in place. From what I was reading, they are working on a fix for the next update. You can keep up on the progress here: https://github.com/zurb/foundation-sites/issues/7909

Jacob