My menu works fine but it stays open on mobile screens. It opens and closes but just stays open when I switch to mobile screen size.
.hamburger {
display: none;
cursor: pointer;
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
background-color: #000;
}
@media only screen and (max-width:768px) {
.hamburger {
display: block;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.navbar--right {
position: fixed;
right: -100%;
top: 70px;
gap: 0;
flex-direction: column;
background-color: #fff;
width: 50%;
height: 100%;
text-align: center;
color:#000;
transition: all .3s;
z-index: 10;
}
.navbar--item {
margin: 1.6rem 0;
}
.navbar--right.active {
right: 0;
}
.navbar--left {
display: none;
}
.wrapper {
display: block;
display: flex;
flex-direction: column;
gap: 2.5rem;
}
}`
