Не работает кнопка адаптивного меню?

Question

[string001]

Привет.
Есть адаптивное меню на сайте, при разрешении меньше 700пх меню перестраивается в вертикальном положении и скрывается, при нажатие на кнопку оно появляется. НО, если снова нажать кнопку меню, соответственно оно скроется. Затем если сайт сделать больше 700пх по идее оно должно уже перестроится в горизонтальное положение. Но меню почему то остается скрытым! Почему?

;(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: решил проблему переписав код:

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

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

Answer 1

[Василий Сакович]

Покажите стили к меню

Comments

[Василий Сакович]

правда и без стилей понятно, как оно может отображаться если у него display = "none" , в классе который определяет вид при разрешении больше 700px укажите display = "block !important"
или как вариант повесить обработчик на ресайз окна и при разрешении больше 700 ставим display = "block"

Answer 2

[Lumore]

@media screen and (min-width: 700px) {
    .menu {
        display: block !important;
    }
}