I ran into a problem as I tried to use the hamburger-menu not only for mobile but for all devices with max 1100px. I am using the shopify debut theme. At first everything went fine. I saw the hamburger-menu and could click on it. But as soon as my window has a pixelcount of 750 to 1100 I can click on the hamburger icon, but nothing shows up. This looks like this (between 750 and 1100px). Instead it should look like this (below 750px).
I already changed the @media only screen and (max-width:750px) to the 1100px and the @media only screen and (min-width:749px) to 1099px inside my theme.css for pretty much every header class. Which made the hamburger icon show up. But now I hit a roadblock. I don't know what I am missing here.
Any help is greatly appreciated. Thanks!
Just in case you need any of these:
My Website URL: www.snow-pearl.com (without any chances to the @media because it is the live version and I dont want to publish something that is not working)
Here is the edited theme.css file (with changes).
Here is the used theme.js file.
Here is the edited header.liquid file.
The reason why your hamburger isn't showing is due to line number 800 in theme.css
@media only screen and (min-width: 750px){
.medium-up--hide {
display: none !important;
}
}