Responsive menu button not working?

Question

css

Hello.
There is an adaptive menu on the site, with a resolution of less than 700px, the menu is rebuilt in a vertical position and hidden, when you click on the button it appears. BUT, if you press the menu button again, it will hide accordingly. Then if the site is made more than 700px, in theory it should already be rebuilt to a horizontal position. But for some reason the menu remains hidden! Why?

;(function () {
    "use strict";

    let menuBtn = document.querySelector(".icon-menu");
    let menu = document.querySelectorAll(".main-menu__item:not(.main-logo)");

    
      menuBtn.addEventListener("click", function () {
        menu.forEach(function (i) {
          if ( i.style.display !== "block") {
            i.style.display = "block";
          } else {
            i.style.display = "none";
          }
        })
      })
  })()

upd: solved the problem by rewriting the code:

menuBtn.addEventListener("click", function () {
        menu.forEach(function (i) {
          i.classList.toggle("menu-open");
          console.log(i);	
        })
      })

.menu-open {
  display: block !important;
}

Answer 1

Show styles to the menu