Mobile menu only opens on second click and closes when i scroll

Question

I made this simple responsive menu with a submenu. but when on mobile and i click the "trigger" it does not open first time, i have to click it again. then when i want to scroll down through the menu it closes.

the HTML:`

    <a href="" class="mobile-trigger">Nav Trigger<span aria-hidden="true"></span></a>

    <div class="nav-main__inner">
    <nav class="nav-main__top cf">
      <ul class="nav-main__left">
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--bold" href="">Link</a></li>
      </ul>
      <ul class="nav-main__right">
        <li class="nav-main__item"><a class="item__link item__link--medium" href="">Link</a></li>
        <li class="nav-main__item"><a class="item__link item__link--medium" href="">Link</a></li>
        <li class="nav-main__item has-submenu"><a class="item__link item__link--medium" href="">Link</a>
          <ul class="submenu">
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
            <li class="submenu__item"><a href="" class="submenu__link">Link sub</a></li>
          </ul>
        </li>
      </ul>

  </nav>`

THE Javascript:

 $(document).ready(function(){

var trigger  = $('.mobile-trigger');
var subm     = $('.submenu');
var navInner = $('.nav-main__inner');

function mmenu(){
 var wi = $(window).width();

 if(wi < 992) {

  trigger.on('click', function(e){
    e.preventDefault();
    trigger.toggleClass('nav-open');
    navInner.toggleClass('show');

    if (subm.hasClass('show')) {
      subm.removeClass('show');
    }
  });

  $('.has-submenu > a').on('click', function(e){
    e.preventDefault();
    subm.toggleClass('show');
  });

}

$(window).resize(function(){
    navInner.removeClass('show');
    trigger.removeClass('nav-open');
});

}

mmenu();


});`

Answer 1

The window.resize event is part of the page load process. It will fire in addition to your document.ready JQuery function. So, this code will run when the page first loads:

navInner.removeClass('show');
trigger.removeClass('nav-open');

If you want to show/hide certain page elements based on viewport size or device orientation, use CSS Media Queries .