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

Question

[Михаил Мишутка]

Здравствуйте. Сверстал меню и обнаружил косяк, как исправить не знаю. Есть меню и есть кнопка, которая на широких экранах спрятана, а при мобильном экране меню прячется и вылезает кнопка при клике на которую меню открывается и закрывается, так вот, если адаптивное меню по нажатию на кнопку закрыть, а потом растянуть экран под широкий монитор, то меню пропадает, то есть присваивается 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();
	});
});

Comments

[ⓒⓢⓢ]

Без стилей - это только гадать.
Как вариант можно в медиа запросах использовать dpi - чтобы различить именно мобильные платформы, а *width\*height - чтобы определить размер экрана.

Например, если это не мобильное устройство и размер экрана больше чем 640 (пример), то показывать меню и подменю

Если это мобильная платформа и размер экрана больше чем 640 (планшет?), то показываем кнопку и соответственно стили для кнопки

Answer 1

[Maksat Sharyfulla]

Можно сделать в таком случае обработчик на изменение экрана

$(window).resize(function(){
  if($(document).width()>600){
     $(".small_mnu").next().children("ul").slideDown();
  }
});