Не работает бургер меню, хотя до этого все работало
Не могу понять почему не открывается бургер, уже все способы попробовалю До того как начал делать адаптив на другой странице,все работало
const burger = document.querySelector(".nav__togle");
const menu = document.querySelector(".nav");
const header = document.querySelector(".header");
burger.addEventListener("click", () => {
menu.classList.toggle("active");
burger.classList.toggle("active");
header.classList.toggle("active");
});
menuLinks.forEach((link) =>
link.addEventListener("click", () => {
menu.classList.remove("active");
burger.classList.remove("active");
header.classList.remove("active");
})
);
.nav__togle {
display: none;
width: 20px;
position: absolute;
padding: 10px 0;
top: 21px;
right: 20px;
z-index: 1;
}
.nav__togle__item {
display: block;
width: 100%;
height: 1.5px;
background-color: #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 1px;
}
.nav__togle__item::after,
.nav__togle__item::before {
content: " ";
width: 100%;
height: 1.5px;
position: absolute;
left: 0;
z-index: 1;
background-color: #000;
border-radius: 1px;
transition: transform .2s linear;
}
.nav__togle__item::after {
top: -7px;
}
.nav__togle__item::before {
bottom: -7px;
}
@media(max-width:425px) {
.header.active {
display: block;
background-color: #59443F;
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
height: 250px;
}
.header.fixed.active {
position: fixed;
}
.header__logo {
align-items: normal;
justify-content: flex-start;
height: 50px;
}
.nav {
display: none;
}
.nav.active {
display: block;
width: 100%;
margin-top: 7%;
}
.menu__list {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
margin-top: 29px;
margin-left: 41px;
}
.menu__item {
border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
width: 100%;
margin-top: 10px;
padding-bottom: 10px;
margin-left: 0;
justify-content: end;
}
.header__state,
.slider__btn,
.social__list,
.tel__link {
display: none;
}
.nav__togle {
display: block;
width: 20px;
position: absolute;
padding: 10px 0;
top: 21px;
right: 20px;
z-index: 0;
font-size: 0;
color: transparent;
border: 0;
background: none;
cursor: pointer;
}
.nav__togle__item {
width: 100%;
height: 1.5px;
background-color: #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 1px;
}
.nav__togle.active .nav__togle__item {
background: none;
}
.nav__togle.active .nav__togle__item::after {
background-color: #fff;
transform-origin: left top;
transform: rotate(45deg) translateX(0.8px);
}
.nav__togle.active .nav__togle__item::before {
background-color: #fff;
transform-origin: left bottom;
transform: rotate(-45deg) translateX(0.2px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="header" id="header">
<div class="container">
<div class="header__inner">
<div class="header__logo">
<a href="#" class="logo__link">
<img src="img/logo.svg" alt="" class="logo__img">
</a>
</div>
<nav class="nav" id="nav">
<ul class="menu__list">
<li class="menu__item">
<a href="profile.html" class="menu__link">Личный кабинет</a>
</li>
<li class="menu__item">
<a href="history.html" class="menu__link"> о нас</a>
</li>
<li class="menu__item">
<a href="news.html" class="menu__link">Новости и акции</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">контакты</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Блог</a>
</li>
</ul>
</nav>
<div class="header__state">
<a href="#" class="header__state__link">
<img src="img/location.svg" alt="" class="state__img">
</a>
<a href="#" class="state__link">
<p class="state">Волгоград</p>
</a>
</div>
<div class="nav__togle " id="nav__togle">
<span class="nav__togle__item">menu</span>
</div>
</div>
</div>
</header>
Источник: Stack Overflow на русском