У меня небольшая проблема с выпадающим меню при переключении страниц

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

Что мне нужно сделать, чтобы панель слайдов вернулась в нормальное состояние при переключении страниц? Надеюсь, вы понимаете, что я имею в виду, иначе я попытаюсь уточнить

HTML

<nav id="navBar">
    <ul id="mainNav">
        <li class="hem"><a href="index.html">Hem</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="om.html">Om</a></li>
    </ul>
</nav>

CSS

#navBar {
    display:none;
    position:relative;

}

#navBar.active{
    display:block;
    height:auto;

}

#mainNav {

    background:#202020;

}

#mainNav li {
    padding:6px 0;
}

#mainNav a {
    color:white;
    font-weight:bold;

}

#mainNav li:hover {
    background-color:#f3ba32;

}

Jquery

$("#menulabel").click(function() {
    $("#navBar").toggleClass("active").slideToggle(300);

});