Onepager: Mobile navigation problem (collapse + sticky functions)

Hi there,

I have two issues with the mobile navigation related to a Onepager.

1.) The mobile navigation is not sticky and so the user is lost in content.

I used your CSS workaround

@media (max-width: 979px){
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;

and

2.) the navigation doesn’t collapse after the click, so I used your JS workaround:

jQuery( function($) {
$(’#x-nav-wrap-mobile a’).on(‘click touchend’, function () {
$(’#x-btn-navbar’).trigger(‘click’);
});
});

My problem is now:

If I load the page fresh and click on the hamburger and then on a navigation element (like “vita”), the page doesn’t scrolls to the specific section. It scrolls further then needed, I think the offset is equal to the height of the navigation. But if I click again on the hamburger + navigation element everything is fine.

Can you help me with a solution?

Kindly regards,

Ralph

Hi @rweigmann,

Please try updating the custom JS from another thread to this:

jQuery(function($) {

  var $body                = $('body');
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  var locHash              = null;
  var dragging             = false;

  var locHashIndex = location.href.indexOf('#');
  if ( -1 !== locHashIndex ) {
    locHash = location.href.substr(locHashIndex).split('/')[0];
  }

  $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 ) {

    if ( ! element ) {
      return;
    }

    try {
      var $el = $(element);
    } catch(error) {
      // abort on invalid selectors. see #610
      return;
    }

    if ( ! $el || 0 == $el.length ) {
      return;
    }

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

  }


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

  $(window).on('load', function() {
    animateOffset(locHash, 1, 'linear');
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchend click', function(e) {
    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');
      }
    }
  });

});

Currently, our X/Pro theme doesn’t support the one-page navigation for the fixed navbar on the mobile version yet. It would need custom coding to achieve which is outside the scope of our support. So you need to consult a developer to help you with this.

Thanks for understanding!

Thank you. Unfortunately, this doesn’t work better (iPad portrait modus). Now there is an extra scroll downwards after 0,5 sec but the page scrolls too much downwards. It’s exactly the same like before.

Additionally I have the issue, that the page jumps downwards some (30-40) pixel, if I scroll to the top.

Furthermore: If I scroll to the top, the navigation doesn’t works anymore (iPad landscape). I click to a category and nothings happens.

All what I want is that the page doesn’t scrolls so much down when I click to the navigation. No calculation is needed, just an offset of approx. -40 pixel.

Can you update your JS solution, please?

Regards,

Ralph

Hey Ralf,

You can adjust the top height by 40 pixels. In the code above, find this block:

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

You can change 1 to 40 and see how it goes.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.