Mobile Menu Opens and Closes by Itself

  • Resolved MooK

    (@kubelyan)


    7 years, 4 months ago

    Hi @kharisblank

    Thank you very much for the last code:
    But I didn’t pay attention that it has some bug: before to start scrolling or after scrolling all the way back to top, if you click on the mobile menu it opens and close by itself right away…
    Could you please look into the code again, please.

    Many thanks! 

    jQuery(function($) {

  if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {

    var headerFix = $('.site-header').offset().top;
    var vDistance = headerFix+280;

    var inserated = false
    $(window).on('load scroll', function() {
      var y = $(this).scrollTop();
      if ( y >= vDistance) {

        if(inserated == false){
          var newHead = $('#masthead').clone();
          
          (newHead).prependTo('body').addClass('masthead-clone').animate({
            top: 0
          }).resize();

          $('.btn-menu').on('click', function(e) {
              $('#mainnav-mobi').slideToggle(300);
              $(this).toggleClass('active');
              e.stopImmediatePropagation()
          });

          $(document).on('click', '#mainnav-mobi li .btn-submenu', function(e) {
              $(this).toggleClass('active').next('ul').slideToggle(300);
              e.stopImmediatePropagation()
          });          
          
          inserated = true;
          
        }    
        
      } else {
      
        $('.masthead-clone').animate({
          top: -200
        }).remove();
        inserated = false;
        
      }

    });
  
  }

});
Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello there,

    I am sorry for such that trouble. Please try replacing the code with this once: 

    
jQuery(function($) {

  if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {

    var headerFix = $('.site-header').offset().top;
    var vDistance = headerFix+280;

    var inserated = false
    $(window).on('load scroll', function() {
      var y = $(this).scrollTop();
      if ( y >= vDistance) {

        if(inserated == false){
          var newHead = $('#masthead').clone();
          
          (newHead).prependTo('body').addClass('masthead-clone').animate({
            top: 0
          }).resize();

          $('.masthead-clone .btn-menu').on('click', function() {
              $('.masthead-clone #mainnav-mobi').slideToggle(300);
              $(this).toggleClass('active');
          });

          $(document).on('click', '.masthead-clone #mainnav-mobi li .btn-submenu', function(e) {
              $(this).toggleClass('active').next('ul').slideToggle(300);
              e.stopImmediatePropagation()
          });          
          
          inserated = true;
          
        }    
        
      } else {
      
        $('.masthead-clone').animate({
          top: -200
        }).remove();
        inserated = false;
        
      }

    });
  
  }

});

    Regards,
    Kharis

    Thread Starter MooK

    (@kubelyan)

    Hi @kharisblank

    It works perfectly well!!!

    thank you very much!!!

    You’re welcome!

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

    Regards,
    Kharis

    Hi @kharisblank

    I am also having this issue on my mobile site:
    mmaegaard.dk.

    Hello there,

    I visited your site with my phone. The mobile menu seems to be working fine — it’s expanded properly with a single tap.

    https://cloudup.com/cSbqstAbIpj

    Have you been able to resolve it?

    Regards,
    Kharis

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile Menu Opens and Closes by Itself’ is closed to new replies.