Navigation glitch with One Page Navigation

Hi guys,

I’m using One Page Navigation as described here.

It is working fine on a desktop, but on a small screen the anchor links don’t hit their targets. It seems to be consistently off by around. 480px.

My site: https://rede.ca

X 6.1.5
WP 4.9.6

bump still hoping for a response

@stevland,

I’ve taken a look and can confirm this is an issue with the latest update. We’ll look into getting it fixed for the next release. Keep in mind support responses can take up to 24 hours.

Thanks for looking into it @alexander. But yikes! Does Themeco keep a repository of X updates, and is it possible to downgrade?

Hi,

Sorry we don’t have a link to older versions.

You can either wait for the next update or contact your host to do a restore for you.

Thanks

I wasn’t happy with this response as I assumed that I would be waiting weeks for a fix.

BUT I just checked the changelog and realized how rapidly you guys release updates.

I also see that this issue is noted as a bug in the current release and is already marked as fixed. :slight_smile:

So I no longer feel anxious about my issue.

A friendly suggestion: in situations like this you guys should consider mentioning how quick updates are released.

Hello @ StevLand,

@Alex is already fixing the issue. Another release update will be out soon.

By the way, if you want to go back to the older stable release of the theme or plugin, please go to your dashboard (https://theme.co/apex/dashboard) to be able to download it.
https://image.prntscr.com/image/L0V_rLxNS-WrcjvW6gVrxQ.png

Hope this helps.

1 Like

Hi guys,

I manually installed X 6.1.6 and the new Cornerstone following the upgrade instructions. I emptied the caches in WP Fastest Cache and emptied by browser cache.

Unfortunately, the anchor links work exactly as the did before. They are completely missing their targets on small screens. Nothing has changed on this end.

My site: https://rede.ca

X 6.1.6
WP 4.9.6
PHP 7.0.30

Hi,

I checked and it seems to be working fine on my end.

See Video - https://www.screencast.com/t/CdilMxzrEny

Try to clear your browser cache and check again.

Thanks

With all due respect Paul, you are not reading carefully.

As I stated in my first post, and also in my most recent post…

“It is working fine on a desktop, but on a small screen the anchor links don’t hit their targets.”

Hi again,

We’re sorry for the confusion, to fix the issue for mobile devices, please add the following code in the Theme Options > JS:

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 as well as your plugin’s cache after adding the code. Let us know how this goes!

1 Like

That did the trick, @Nabeel! Thank you.

Hi @stevland,

Happy to hear that.

Feel free to ask us again.

Thanks.

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