I'm struggling with my menu navbar responsivity. My mobile-menu is supposed to wrap or unwrap based on the click on "hamburger" icon. This works in chrome developer tools and in chrome on phone as well. However doesn't work on iOS safari which is a big deal for me. I paste the code below and in case you wanna check on live server you can find it here(sorry it's not in English but that shouldn't be too much of a problem): /

Here is my relevant html

<!-- Mobile menu button -->
          <div class="md:hidden flex items-center">
            <button class="outline-none mobile-menu-button cursor-pointer hover:bg-opacity-20">
              <svg
                class="w-6 h-6 text-gray-500"
                x-show="!showMenu"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
              <path d="M4 6h16M4 12h16M4 18h16"></path>
              </svg>
            </button>
          </div>
      </nav>
    <!-- Mobile menu -->
    <div class="hidden mobile-menu">
      <ul class="" style="margin-left: -20px; margin-right: -20px">
        <li><a href="#omne" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">O mně</a></li>
        <li><a href="#cenik" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Ceník</a></li>
        <li><a href="#faq" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">FAQ</a></li>
        <li><a href="#contact" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Kontakt</a></li>
       </ul>
    </div>

I'm struggling with my menu navbar responsivity. My mobile-menu is supposed to wrap or unwrap based on the click on "hamburger" icon. This works in chrome developer tools and in chrome on phone as well. However doesn't work on iOS safari which is a big deal for me. I paste the code below and in case you wanna check on live server you can find it here(sorry it's not in English but that shouldn't be too much of a problem): http://hustydoucko.freecluster.eu/

Here is my relevant html

<!-- Mobile menu button -->
          <div class="md:hidden flex items-center">
            <button class="outline-none mobile-menu-button cursor-pointer hover:bg-opacity-20">
              <svg
                class="w-6 h-6 text-gray-500"
                x-show="!showMenu"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
              <path d="M4 6h16M4 12h16M4 18h16"></path>
              </svg>
            </button>
          </div>
      </nav>
    <!-- Mobile menu -->
    <div class="hidden mobile-menu">
      <ul class="" style="margin-left: -20px; margin-right: -20px">
        <li><a href="#omne" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">O mně</a></li>
        <li><a href="#cenik" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Ceník</a></li>
        <li><a href="#faq" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">FAQ</a></li>
        <li><a href="#contact" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Kontakt</a></li>
       </ul>
    </div>

And my Javascript

/* MOBILE MENU NAVBAR */

// Grab HTML Elements
const btn = document.querySelector(".mobile-menu-button");
const menu = document.querySelector(".mobile-menu");

// Add Event Listeners
btn.addEventListener("click", () => {
    menu.classList.toggle("hidden");
});

/* END OF MOBILE MENU NAVBAR */

I have tried both “click” and “touchstart” as an option for eventlistener. Safari resists both of them

Please let me know if I should post the code in different way so that it is convenient for the reader. It's my first stackoverflow post with code. Thank you in advance!

• javascript
• html
• css
• mobile-safari
• addeventlistener

• 1 What error did you have on console Safari? Did you wait till DOMContentLoaded? – Greg-- Commented Nov 30, 2021 at 9:04
• @Greg-- I just added the eventlistener into DOMContentLoaded listener. Nothing has changed. I have plenty of output in console, but nothing concerning the menu. It feels like Safari simply doesn't know that there is a "click" event happening – Mockaj Commented Nov 30, 2021 at 9:25
• Try my answer on safari – Greg-- Commented Nov 30, 2021 at 9:26

1 Answer 1

"Grab" DOM elements only after DOM was loaded!

Check Documentation page

// find HTML elements only after DOM loaded!!!! if DOM did't load you can't find it
window.addEventListener('DOMContentLoaded', (event) => {
  // Grab HTML Elements
  const btn = document.querySelector(".mobile-menu-button");
  const menu = document.querySelector(".mobile-menu");

  // Add Event Listeners
  btn.addEventListener("click", () => {
    menu.classList.toggle("hidden");
  });
});

.hidden {
  display: none;
}

<!-- Mobile menu button -->
<div class="md:hidden flex items-center">
  <button class="outline-none mobile-menu-button cursor-pointer hover:bg-opacity-20">
              <svg
                class="w-6 h-6 text-gray-500"
                x-show="!showMenu"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
              <path d="M4 6h16M4 12h16M4 18h16"></path>
              </svg>
            </button>
</div>
</nav>
<!-- Mobile menu -->
<div class="hidden mobile-menu">
  <ul class="" style="margin-left: -20px; margin-right: -20px">
    <li><a href="#omne" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">O mně</a></li>
    <li><a href="#cenik" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Ceník</a></li>
    <li><a href="#faq" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">FAQ</a></li>
    <li><a href="#contact" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Kontakt</a></li>
  </ul>
</div>