Бургер-меню не отображается на странице галереи в мобильной версии, работает везде

Question

Burger Menu не отображается на странице галереи в мобильном приложении, работает везде. Можете ли вы помочь мне выяснить, в чем проблема? Я должен завершить этот веб-сайт для моего проекта для пожилых людей. Любая помощь будет принята с благодарностью! Вот ссылка на сайт:

https://www.morpheusdesignstudios.com

const navSlide = () => {
  const burger = document.querySelector('.burger');
  const nav = document.querySelector('.right-side');

  const navLinks = document.querySelectorAll('.right-side a ');


  burger.addEventListener('click', () => {
    nav.classList.toggle('right-side-active');



    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = '';

      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + .3}s`;
      }

    });

    burger.classList.toggle('toggle');
  });

}

navSlide();
```


This is the CSS for the navigation menu that is suppose to display the burger menu in mobile view. 


```

@media screen and (max-width: 600px) {
  .right-side {
    position: absolute;
    right: 0px;
    height: 61vh;
    top: 9vh;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 33%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .right-side a {
    opacity: 0;
  }
  .dropdown .dropdown-content a {
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .burger {
    display: block;
    cursor: pointer;
    padding-top: 9%;
  }
  .right-side-active {
    transform: translateX(0%);
    right: 14%;
    z-index: 99999;
  }
}
```
This is the navigation menu when in desktop view the burger menu is set to display: none. 






```

<div class="right-side">
  <div class="nav-link-wrapper"><a href="index.html">HOME</a></div>
  <div class="nav-link-wrapper"><a href="gallery.html">GALLERY</a></div>
  <div class="nav-link-wrapper"><a href="about.html">ABOUT</a></div>
  <div class="nav-link-wrapper"><a href="contact.html">CONTACT</a></div>
  <div class="dropdown">
    <div class="conbtn">
      <div class="nav-link-wrapper">
        <a href="services.html">SERVICES</a>

        <div class="dropdown-content"><a href="graphicdesign.html">Graphic Design</a><a href="photography.html">Photography</a><a href="printing.html">Professional Printing</a></div>
      </div>
    </div>
  </div>
</div>
<div class="burger">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

``

Меню бургеров не отображается на странице галереи в мобильном режиме, работает везде. Можете ли вы помочь мне выяснить, в чем проблема? Я должен завершить этот веб-сайт для моего проекта для пожилых людей. Любая помощь будет принята с благодарностью! Вот ссылка на сайт:

https://www.morpheusdesignstudios.com

Answer 1

Я не специалист, но, как я вижу, у вас проблема со «слайдами». Попробуйте

var slides[] = document.getElementsByClassName("mySlides");

, потому что вы имеете дело с массивом.

, так как у вас проблема с js, страница перестает загружаться.