Archived topic
Anchor links not working on mobile
12 replies · Started by Justin on November 30, 2022
I have a single page site that I built for a client using anchor links in the navigation. On desktop they work correctly. However, when I click a navigation item on mobile, it briefly displays the section of the page its supposed to, then jumps back to the top of the page and closes out the off canvas panel.
I've disabled my caching plugin and ensured that both the Generatepress theme and GP Premium are up to date.
The website in question is https://fisherconstructionandexcavation.com/
Thanks in advance!
Hi Justin,
Can you try using the full URL instead of just the #anchor for the link?
Let me know :)
Hey Leo, thanks for your quick response.
I tired changing the link to the full URL as suggested and it didn't work. Anything else I can try?
Very strange.
Can you disable all plugins except GP Premium and GenerateBlocks to test?
Make sure any custom functions are disabled as well.
Thought I should also mention that we have a built-in smooth scroll script that might be worth considering for a one page site:
https://docs.generatepress.com/article/smooth-scroll/
Let me know :)
I tried disabling all plugins except those two and still no difference. I also tried enabling and disabling the smooth scroll function you mentioned and that didn't do anything either.
Hi Justin,
Anchor links usually don't work with off canvas menu.
Can you try this solution?
https://generatepress.com/forums/topic/off-canvas-panel-working-with-anchor-links/#post-1561238
Ok, so after investigating the issue further I want to make mention of the following:
I have three sites that are all using a one page layout with anchor links in the navigation. They are...
https://fisherconstructionandexcavation.com/
https://chpartypinatas.com/
https://demo1.childressdesigns.com/
The first two have the most up to date version of Generatepress and GP Premium installed and both of them are experiencing the same issue with the anchor links not working in the off-canvas mobile menu. This didn't occur until recently. Both of the sites used to function properly.
The last one - demo1.childressdesigns.com - has not been updated to the most recent version of GP Premium and the anchor links are working properly.
That being said, it seems like the issue is with the updated version of GP Premium.
Thoughts?
Hi Justin,
I see. Do you have Mobile Header enabled for https://demo1.childressdesigns.com/
If it's enabled, can you temporarily disable it and check if the issue will exist on an un-updated GP and GPP versions?
And, can you check if you have it enabled for the other two? If not, enable it. Can you test these as well afterward?
Let us know how it goes.
Fernando,
Mobile header was OFF on all three sites.
I temporarily enabled it on the two sites I'm experiencing issues with (Fisher Construction & Excavation / CHPartyPinatas) and it didn't change anything. The anchor links still aren't working.
Hey Justin,
Just confirmed that this is a bug in the latest GP Premium.
For now, you can disable the Off Canvas panel and use the standard mobile menu as the bug doesn't exist there.
Will post back here once I have news on an update or a temporary fix.
Thanks - sorry for the inconvenience!
Hi there,
Can you try this fix?: https://gist.github.com/tomusborne/9017bfacdbc6c4f4980104062168963d
1. Download this file as offside.min.js
2. Upload (and replace) this file to wp-content/plugins/gp-premium/menu-plus/function/js
Let me know :)
Hey Tom,
That did the trick. Thanks so much!
Thanks for letting me know! We'll release a patch with this shortly.
