I am facing an issue with the burger menu icon on my website. When I click on the burger icon, it doesn't transform into a cross as intended. Even though I can see that the class .active is being added in the DOM, the menu doesn't respond to the click at all. The .img and .nav elements are grid items, so I suspect I may have confused something in the grid container. If you need more details about the project, feel free to ask. I hope the provided information is sufficient to understand the situation. =) Thank you!
$(document).ready(function() {
$('.header-burger').click(function(event) {
$('.header-burger, .nav').toggleClass('.active');
});
});@media only screen and (max-width: 370px) {
.nav {
grid-row: 2;
grid-column: 1/ span 2;
position: relative;
top: -112%;
width: 100%;
height: 100%;
background-color: black;
padding: 0 0 0 10px;
z-index: 3;
}
.nav .active {
top: 100%;
}
.header-burger {
display: block;
position: relative;
width: 30px;
height: 20px;
}
.header-burger:before,
.header-burger:after {
content: '';
background-color: white;
position: absolute;
width: 100%;
height: 2px;
left: 0;
}
.header-burger:before {
top: 0;
}
.header-burger .active:before {
transform: rotate(45deg);
top: 9px;
}
.header-burger .active:after {
transform: rotate(-45deg);
bottom: 9px;
}
.header-burger:after {
bottom: 0;
}
.header-burger span {
position: absolute;
background-color: white;
left: 0;
width: 100%;
height: 2px;
top: 9px;
transition: all 0.3 ease 0.3;
}
.header-burger.active span {
transform: scale(0);
}
}<div class="img">
<img src="./logo.svg">
<div class="header-burger"><span></span></div>
</div>
<div class="nav">
<ul class="burger-ul">
<li class="burger-li"><a>About</a></li>
<li class="burger-li"><a>Careers</a></li>
<li class="burger-li"><a>Events</a></li>
<li class="burger-li"><a>Products</a></li>
<li class="burger-li"><a>Support</a></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>