При открытии сайта на мобильном устройстве автоматически срабатывает бургер-меню

Здравствутйте, такая проблема учусь верстать сайты и в связи с войной мой курс у меня забрали обучения, но остался чуть материал и вот я сделал свой сайт под мобильное устройство, открываю, а у меня сразу срабатывает бургер меню и приходится его закрывать, что бы получить доступ к контенту) Подскажите, как убрать автоматическое срабатывания бургера ?

    <button class="open-burger-btn" type="button" data-menu-open>
          <svg class="open-burger-btn__burger-icon" width="40" height="40">
            <use href="./images/symbol-defs.svg#icon-burger-menu"></use>
          </svg>

 <div class="burger-menu is-open" data-menu>
        <div class="container mobile-menu__container">
          <button class="burger-menu__close_btn" data-menu-close>
            <svg class="burger-menu__svg" width="40" height="40">
              <use href="./images/symbol-defs.svg#close-icon"></use>
            </svg>
          </button>
          <nav class="nav-burger-menu">
            <ul class="burger-nav-list">
              <li class="burger-nav-list__marker-list">
                <a class="burger-nav-list__link current " href="">Студия</a>
              </li>
              <li class="burger-nav-list__marker-list">
                <a class="burger-nav-list__link" href="./porfolio.html">Портфолио</a>
              </li>
              <li class="burger-nav-list__marker-list">
                <a class="burger-nav-list__link" href="">Контакты</a>
              </li>
            </ul>
          </nav>
          <address>
            <ul class="burger-adress-list">
              <li class="burger-adress-list__item">
                <a class="burger-adress-list__adress-link" href="tel:+380961111111"
                  >+38 096 111 11 11</a
                >
              </li>
              <li class="burger-adress-list__item">
                <a class="burger-adress-list__mail-link" href="mailto:[email protected]"
                  >[email protected]</a
                >
              </li>
            </ul>
          </address>
          <ul class="burger-social-link-list">
            <li class="burger-social-link-list__item">
              <a class="burger-social-link-list_link" href="">Instagram</a>
            </li>
            <li class="burger-social-link-list__item">
              <a class="burger-social-link-list_link" href="">Twitter</a>
            </li>
            <li class="burger-social-link-list__item">
              <a class="burger-social-link-list_link" href="">Facebook</a>
            </li>
            <li class="burger-social-link-list__item">
              <a class="burger-social-link-list_link" href="">LinkedIn</a>
            </li>
          </ul>
        </div>
      </div> 

Так же js, честно скажу js еще не изучал, это был код предоставлен нашим ментором

    (() => {
  const refs = {
    openMenuBtn: document.querySelector('[data-menu-open]'),
    closeMenuBtn: document.querySelector('[data-menu-close]'),
    menu: document.querySelector('[data-menu]'),
  };

  refs.openMenuBtn.addEventListener('click', toggleModal);
  refs.closeMenuBtn.addEventListener('click', toggleModal);

  function toggleModal() {
    refs.menu.classList.toggle('is-open');
  }
})(); 

Ответы (1 шт):

Автор решения: Neverm1ndo

Для того, чтобы меню не появлялось, вам нужно убрать класс is-open из элемента с дата-атрибутом data-menu.

<div class="burger-menu" data-menu>

В вашем случае именно этот класс определяет, будет ли отображено меню.

→ Ссылка