Не работает бургер меню, хотя до этого все работало

Рейтинг: 0Ответов: 0Опубликовано: 16.07.2023

Не могу понять почему не открывается бургер, уже все способы попробовалю До того как начал делать адаптив на другой странице,все работало

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>

Ответы

Ответов пока нет.