The Cool Coder
New Coder
Hi,
I was creating a hamburger menu for my HTML webpage when I ran into this issue. Whenever my screen width reaches a min-width I want the nav to be visible always. But I am unable to do this. Attaching video for reference code is also attached.
Thank You
Javascript
CSS
I was creating a hamburger menu for my HTML webpage when I ran into this issue. Whenever my screen width reaches a min-width I want the nav to be visible always. But I am unable to do this. Attaching video for reference code is also attached.
Thank You
Javascript
JavaScript:
const menuBtn = document.querySelector('.menu-btn');
const pyramid = document.getElementById("bars");
const cross= document.getElementById("cross");
const nav =document.querySelector('.nav');
let displayMenu = false;
menuBtn.addEventListener("click", toggleMenu);
function toggleMenu(){
if(!displayMenu){
cross.style.display = "block";
displayMenu = true;
pyramid.style.display = "none";
nav.style.display = 'block';
}else{
displayMenu = false;
cross.style.display = "none";
pyramid.style.display = "block";
nav.style.display = 'none';
}
}
CSS
CSS:
.menu-btn{
display: none;
}
nav{
display: block;
background-color: $bg-light;
ul{
display: grid;
grid-template-columns: repeat(5,auto);
padding: 1.5rem;
font-size: 20px;
text-decoration: none;
list-style: none;
@include hover;
a{
color: $bg-dark;
}
a:hover{
font-size: 23px;
color: $logo-sec-c;
}
i{
padding: 5px;
}
}
}
@media (max-width: 693px){
.menu-btn{
position: absolute;
z-index: 1;
display: block;
right: 1rem;
top: 1rem;
height: 20px;
width: 30px;
cursor: pointer;
@include transition-ease;
#bars,
#cross{
position: absolute;
right: 0px;
top: 0.5rem;
margin: 20px;
width: 20px;
height: 10px;
@include transition-ease;
}
}
#cross{
display: none;
color: red;
}
.nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
user-select: none;
height: 100vh;
opacity: 0.7;
margin-top: 47rem;
display: none;
align-items: center;
.menu-nav{
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
overflow: hidden;
background-color: $nav-c;
list-style-type: none;
transform: translateY(-100%);
@include transition-ease;
}
}
.menu-nav-item{
padding: 3rem;
border: 3px white solid;
width: 100%;
text-align: center;
font-size: 22px;
text-decoration: none;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
a{
color: $logo-sec-c;
}
a:hover{
font-size: 30px;
}
i{
padding: 5px;
}
}
}