CSS dev build is inconsistent with deploy build
Everything looks good and works fine in my react app dev build, but some css styles aren't being correctly applied to the production build i host on my github pages through gh-pages npm package (through this guide https://github.com/gitname/react-gh-pages)
this is my hosted app: https://arthwr.github.io/little-lemon-app/
The problem with mobile version hamburger button.
It works like this: it applies .openMenu class to 2 elements (parent div and nav element) to apply some css styles.
However menu that is supposed to be hidden on left , is seen and by the look of dev tools css styles for default behaviour aren't being loaded correctly or not switching for some reason.
Class is added and changed correctly though.
I attached 2 screenshots so its seen how i want it to look like and how it looks and works correctly on my dev version.
I also attached CSS snapshot for the elements that have this problem :
.navContainer
.navContainer.openMenu
.nav
.nav.openMenu
Little Lemon Restaurant
Experience Culinary Magic at Little Lemon Restaurant
1 Reply
after i looked through minified version of css i found out that somehow deploy build is concatinating css classes into 1 :
.Nav_navContainerGhavJ,
.Nav_navContainerGhavJ.Nav_openMenuL+8i0,
.Nav_navp72ig,
.Nav_navp72ig.Nav_openMenuL+8i0 {
@media screen and (max-width: 852px) {
left: 0;
opacity: 1;
position: absolute;
}
}
so i see the problem but i don't know how to solve this. I also tried to change class names but it didn't help