Mobile navigation autocollapse

[Hugoboss]

Hi,

Can you please advise how I can make the mobile navbar autocollapse?
I have created the header with Pro.

[mldarshana]

Hi There,

Thanks for writing in! Could you please explain a bit to understand it better. Do you want the mobile navbar to be collapsed by default on mobile when loading the site ?

Also I see that you have enabled under construction mode, please provide us a way to access your current site, so that we can assist you accordingly.

Thanks!

[Hugoboss]

Hi,

Sorry for not being clear about the request.

What I want is that the mobile navbar dropdown should close when you select a menulink. As it is by default, you need to click the burger again to close the dropdown submenu.

I have disabled the construction mode now.

[nabeel]

Hi again,

Thank you for the details. To do this, try adding the following CSS code in the Theme Options > JS:

jQuery(document).ready(function($) {

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 190;
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;
  
  $body.on('touchmove', function() {
      dragging = true;
  } );
  
  $body.on('touchstart', function() {
      dragging = false;
  } );


  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }


  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').off('touchend touchstart').on('click', function(e) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        
        if (dragging) {
            return;
        }
        console.log($el);
		if($('.x-anchor.x-anchor-toggle').hasClass('x-active') && $('.x-menu.x-menu-dropdown.x-dropdown').hasClass('x-active')) {
			$('.x-anchor.x-anchor-toggle').click();
		}
        animateOffset($el, 850, 'xEaseInOutExpo');
      }
    }
  });
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Hugoboss]

Hi,

Thanks for your reply!
This closes the menu as I want, however when you click on a sublink, the page scrolls down as supposed but then scrolls up a little bit again, is it possible to check this?

[rad]

Hi there,

Let’s stop the scrolling before starting a new scroll animation. Please replace this

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }

with this

  function animateOffset( element, ms, easing ) {
    $('html, body').stop().animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }

Thanks!

[Hugoboss]

Hi,

That solved the issue.
Thank you very much!

[jumar]

On behalf of my colleague, you’re welcome.