JQuery слайд-переключатель и размер экрана

Question

Эй, ребята, я пытался сделать мой заголовок отзывчивым, и у меня возникла одна проблема так что это мой элемент

        <div class="w-75">
           <ul class="main-menu">
               <li class="active"><a href="/home">{{ __('general.Anohe') }}</a></li>
               <li><a href="#">{{ __('general.sell-place') }}</a></li>
               <li><a href="/page/about">{{ __('general.about-us') }}</a></li>
               <li><a href="/page/contact-us">{{ __('general.contact-with-us') }}</a></li>
               <li>
                    <ul class="nav navbar-nav">
                        <li class="dropdown dropdown-large">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">محصولات <b class="caret"></b></a>
                            <ul class="dropdown-menu dropdown-menu-large row">
                                <li class="col-sm-6 float-right">
                                    <ul dir="rtl">
                                        <li class="dropdown-header">محصولات</li>
                                        <li class="w-100"><a href="/home/electronic">الکترونیک</a></li>
                                        <li class="w-100"><a href="/home/book">کتاب</a></li>
                                        <li class="w-100"><a href="/home/cloth">بازی و سرگرمی</a></li>
                                        <li class="w-100"><a href="/home/game">پوشاک</a></li>
                                    </ul>
                                </li>
                            </ul>

                        </li>
                    </ul>
               </li>
               <li>
                    <form action="/search">
                      <input style="height: 40px;width: 200px" type="text" placeholder="Search.." name="search">
                      <button style="background-color: #e22b63; color: #ffffff; border: none; height: 40px" type="submit">Submit</button>
                    </form>
                </li>
           </ul>
        </div>

когда мое разрешение экрана становится меньше 550 px, меню становится кнопкой, а при

    $('#toggle-sliding').click(function(){
        $('.main-menu').slideToggle('slow');
    });

Я могу скрыть и показать это. проблема в том, что когда я скрываю его и увеличиваю размер экрана до более чем 550 пикселей, кнопка исчезает, а мое меню все еще скрыто, и мне приходится обновлять страницу, чтобы снова ее отобразить. так что я могу сделать, чтобы он снова спрятался?