Hi,
Is there any update to the issue described in this thread?
The javascript provided there doesn’t really provide the same effect, it gives this slow and somewhat mechanical facsimile of the proper scrolling effect.
Is this ever likely to be fixed? Do we have any better script we can apply as a workaround?
Hey Michael,
Try the code suggested here: https://theme.co/apex/forum/t/section-ids-not-accounting-for-menu-height/66589/4?u=christian_y
Hope that helps.
Hi @christian_y
Thanks - that script works very well to reproduce the proper one page navigation effect. However, it doesn’t work perfectly on iPad. It seems to work the first time the page loads, and then once you have manually navigated around the page, the links stop working.
Unfortunately it also breaks another script I’ve used for a custom animated burger menu. There’s always another thing in the wonderful world of web development 
Hi Michael,
Sorry but we cant provide additional customization as we are risking having a conflicting issue like you have now and maybe in the future.
This issue has been already resolved apparently but for some reason, it gets back. I’ve submitted this to our issue tracker again as an open bug so the developers will be made aware of it.
Thank you for understanding,
Hey @friech and @christian_y,
Please bear in mind that I am working on a production site, and the one page navigation function that is supposed to be a feature of X is not working on the world’s most popular browser.
How am I supposed to explain this to my client? I think in this case you should really provide a fix that works, regardless of whether or not I have other customisations.
Thanks for your help with this.
Hey Michael,
The last code that was suggested is the original smooth scroll code of our theme. Nabeel just copied that code from a previous theme version.
Regarding your concern about it:
I tried the code on your site and viewed on iPad and all the links work. I tested that in a real iPad device.
We’re very sorry about this bug but it is a different story if we also take into account your custom code. That’s outside the scope of our support. You can tell us what your custom code does and we’ll submit the function as feature request so our development team might take it into account in the future.
And, not all bugs could be resolved immediately nor could we provide a workaround immediately. For this case though, we have provided a code that works.
Thank you for understanding.
Hi @christian_y,
I am testing it right now on an iPad Pro, and as I said the scrolling works when you first load the page.
Ok, so now try moving the page up and down with your finger. Now try the links again. They are dead. They no longer work once the screen has been touched and the page is scrolled up and down with your finger.
Tested on Chrome and Safari. Please try to reproduce the issue again as I’ve suggested.
To be honest I can live with the iPad issue, at least it works to some degree even if not perfectly.
However I would really appreciate at least some guidance on what may be causing the issue with my animated burger menu. The only thing wrong is that when the scrolling code is applied the burger menu does not animate.
The method I am using is based on an earlier support thread from you guys. The code is as follows:
jQuery("#menu").click(function(event) {
event.preventDefault();
jQuery('.x-nav-collapse').promise().done(function(){
jQuery("#menu").toggleClass("on");
});
});
Then there is a _nav-primary.php file in x-child > framework > views > global like this:
<?php
// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
?>
<a href="#" id="menu" class="x-btn-navbar collapsed" data-x-toggle="collapse" data-x-toggleable="x-nav-wrap-mobile">
<i class="x-icon-bars"></i>
<span></span>
</a>
<nav class="x-nav-wrap desktop" role="navigation">
<?php x_output_primary_navigation(); ?>
</nav>
<div id="x-nav-wrap-mobile" class="x-nav-wrap mobile x-collapsed" data-x-toggle-collapse="1" data-x-toggleable="x-nav-wrap-mobile">
<?php x_output_primary_navigation(); ?>
</div>
Then finally there is some css to animate the menu, but I don’t think that’s relevant here.
I’m sure this is something that is easily remedied. Bearing in mind a fix is only necessary because the most recent version of X one page navigation doesn’t work in Chrome, I’m hoping that one of the Themeco team would be prepared to help out.
Thanks in advance for any help with this!
Hey Michael,
You are animating the burger menu into an X icon and that is a feature only available in Pro. The official solution to this is to upgrade to Pro. All the issues here do not exist in the Pro Header. You’ll also won’t need to custom code to achieve a “burger turning to X icon”.
I’ll provide some guidance regarding your custom code but please note that we will not support it nor enhance it.
Your code doesn’t work because the Scroll Trigger code targets all links with hash as href with the exception of comments.
Since your animation is CSS based and you’re just using JS to toggle the class on, you can utilize the readily available class x-active instead of on. That class gets toggled when you click on the mobile nav button. Use x-active in your CSS instead of on and remove your custom JS.
-----------------------------------------------------------------------------------
I can’t replicate the link issue in iPad by the way so try clearing your browser’s cache.
Thanks.
Hey @christian_y,
As this is a production site and I’m on a tight deadline I’m not quite ready to upgrade to Pro at this moment, so I’m really grateful for your kind help with this. However I am definitely going to keep this in mind for the near future.
Meanwhile thanks for this excellent solution, I was not aware of the x-active class! It works perfectly, and I have Chrome scrolling working too!
You are always welcome!
Glad this is now sorted out. Cheers.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.