Why does the mobile menu hide the desktop menu?

Question

User navigation

Hello. I made up the menu and found a jamb, I don’t know how to fix it. There is a menu and there is a button that is hidden on wide screens, and on a mobile screen, the menu hides and a button pops up when you click on which the menu opens and closes, so if the adaptive menu closes by clicking on the button, and then stretch the screen under a wide monitor, then the menu disappears, that is, display: none is assigned. In media queries, only display: block !important works, but I want to do everything right. Do you need to fix something in js?
Here is the code

<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();
  });
});

Answer 1

In this case, you can make a handler for changing the screen

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