Currently, I am in the process of developing a landing page using a combination of HTML/CSS and Javascript. Everything seemed to be functioning smoothly with the media query max-width: 768px. However, when attempting to implement the media query for min-width: 768px, I encountered an issue where the display: block property was not effectively removing the menu bar for screen sizes larger than 768px.
@media screen and(min-width: 768px){
body{
margin: 0;
}
.nav{
height: calc( var(--header-height) + 3rem);
}
.nav-toggle .nav-close{
display: none;
}
}
Within this code snippet, you will find that .nav-toggle is the designated class for the hamburger icon, while .nav-close represents the class assigned to the cross (X) button. Despite utilizing the display property as planned, the toggle continues to be displayed on the screen.