One Page Nav Broken

[arintoker]

Hello,

I was on X Theme V5 for a long long time. I just recently upgraded to V6 and to my surprise the only thing which broke was the one-page navigation. However, the current navigation items are still tracked as I scroll.

I was unable to figure out why it’s no longer working. I am still using the visual composer over Cornerstone since this site was built a long time ago and I didn’t want to rebuild it in Cornerstone.

URL: https://arintoker.com/

Any ideas?

[Alaa]

Hi @arintoker

I’ve checked your website and I can see there is JS error when I click on any of the menu items, please try the following:

1. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.
2. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
3. Remove custom CSS and Javascript from the options or Child Theme and test the case.

If this doesn’t help, then please provide us with WordPress Dashboard login details in a “Secure Note” so we can investigate this issue.

Thanks.

[nico]

Hi @arintoker,

I have tried to check your setup however the login details that you shared is incorrect.

Upon checking your console, I could see that there is a lot of errors. This could be script or plugin conflict.

Please try the Number 2 and 3 option that Alaa shared above.

Let us know how it goes.

Thanks.

[nabeel]

Hi again,

I see you are using custom JS to fix the mobile offset issue that is triggering an error, I went ahead and replaced the code with the following one in the Theme Options > JS:

// Fixing One Page Navbar Offset on Mobiles
jQuery(document).ready(function($) {
   function belowMastheadArrow() {
      var $body           = $('body');
      var $bodyHeight     = $body.outerHeight();
      var $adminbarHeight = $('#wpadminbar').outerHeight();
      var $navbarHeight   = $('.x-navbar').outerHeight();

      var scrollSpyLinks = $('.x-nav > li > a[href^="#"]');
      if ($(window).width() <= 979) {
         scrollSpyLinks.off('click'); 
         scrollSpyLinks.click(function(e) {
            e.preventDefault();
            var $contentBand = $(this).attr('href');
            $('html, body').animate({
               scrollTop: $($contentBand).offset().top + 1
            }, 850, 'easeInOutExpo');
         });
      } else {
         scrollSpyLinks.off('click'); 
         scrollSpyLinks.click(function(e) {
            e.preventDefault();
            var $contentBand = $(this).attr('href');
            $('html, body').animate({
               scrollTop: $($contentBand).offset().top - $adminbarHeight - $navbarHeight + 1
            }, 850, 'xEaseInOutExpo');
         });
      }
   }

   belowMastheadArrow();

   $(window).resize(belowMastheadArrow);
});

One page navigation is working fine now. Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[arintoker]

Ohhhh! I totally forgot I had done that. Now I feel dumb haha

Thanks for fixing it

[nabeel]

Glad we could help.

Cheers!