I am creating a landing page using HTML/CSS and javascript. For media query, max-width: 768px is working fine but when I used media query for min-width: 768px, the display: block, is not removing the menu bar for screen size greater than 768px.
@media screen and(min-width: 768px){
body{
margin: 0;
}
.nav{
height: calc( var(--header-height) + 3rem);
}
.nav-toggle .nav-close{
display: none;
}
}
here .nav-toggle is the hamburger icon class and .nav-close is the class for the cross(X) button. I used display property but it is still showing the toggle.
it's' all about targeting the right classes
try to inspect via your browser devtools in your targeted size you will probably notice that your css is overridden in this case you can try more specific classes to increase the css specificity or force your css via !important tag