Mobile navigation issue

[ovensaso]

Hi guys,

I am having some problems with mobile navigation for http://vinalisjak.si.
When a category in a mobile navigation is selected (on click/touch) the selected section is not positioning correctly. I need some custom .js to force the selected section to position correctly after click/touch.

Currently I use some custom CSS and JS for mobile navigation positioning and autoclose:

Global CSS
media all and (max-width:979px){
.x-navbar-fixed-top-active .x-navbar {
top: 0;
left: 0;
position: fixed;
width: 100%;
max-height: 100%;
overflow-y:scroll;
}
}

.x-btn-navbar {
padding-right:10px;
}

Global JS
//MOBILE NAVIGATION:
jQuery(function($) {
$(’.mobile .x-nav a’).on(‘touchend click’, function(){
setTimeout(function(){
$(’.x-btn-navbar’).click();
},300);
});
});

Thank you for your help.

[nabeel]

Hi there,

Thanks for writing in! To fix the issue, please add the following code in the Theme Options > CSS:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar').outerHeight();
  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);
	return false;
  }


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

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


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').off('touchend click').on('touchend 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;
        }
        
        animateOffset($el, 850, 'xEaseInOutExpo');
		if(!$('.x-nav-wrap-mobile').hasClass('.x-collapsed')) {
			$('.x-btn-navbar').click();
		}
		return false;
      }
    }
  });
});

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

[ovensaso]

Hi guys,

the code was added to Theme Options > JS:
Everything works as expected.

Thank you!

[mldarshana]

Glad we were able to help