Почему мобильное меню прячет десктопное меню?

Здравствуйте. Сверстал меню и обнаружил косяк, как исправить не знаю. Есть меню и есть кнопка, которая на широких экранах спрятана, а при мобильном экране меню прячется и вылезает кнопка при клике на которую меню открывается и закрывается, так вот, если адаптивное меню по нажатию на кнопку закрыть, а потом растянуть экран под широкий монитор, то меню пропадает, то есть присваивается display: none. В медиа запросах срабатывает только display: block !important, но хочу сделать все правильно. Скорее всего нужно в js что то поправить?
Вот код
<nav class="top_mnu">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="button-mnu small_mnu"><i class="fa fa-bars"></i> Меню</div>
						<div class="menu-desktop">
							<ul>
								<li class="active"><a href="#">Главная</a></li>
								<li><a href="#">О нас</a></li>
								<li><a href="#">Услуги</a></li>
								<li><a href="#">Наши работы</a></li>
								<li><a href="#">Акции</a></li>
								<li><a href="#">Вакансии</a></li>
								<li><a href="#">Контакты</a></li>
							</ul>
						</div>
						<div class="waranty">
							<div class="w_top">Гарантия</div>
							<div class="w_bottom">На все работы</div>
						</div>
					</div>
				</div>
			</div>
		</nav>

$(function() {
	$(".small_mnu").click(function() {
		$(this).next().children("ul").slideToggle();
	});
});
  • Вопрос задан
  • 229 просмотров
Решения вопроса 1
KanoOdzava
@KanoOdzava
Frontend Developer
Можно сделать в таком случае обработчик на изменение экрана
$(window).resize(function(){
  if($(document).width()>600){
     $(".small_mnu").next().children("ul").slideDown();
  }
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы