-
Posts
-
Hi, I have 2 Problems regarding anchor links on a website.
1. In the desktop version of the Website, anchor links from the main menu work as expected and jump to the correct places (to the beginning of a color section where anchor links are set in developer options) However, in the mobile Menu, they don’t jump to the beginning, but the end of the corresponding sections that have the anchor links. So the user will only see the end of the information that is supposed to show.
2. In the Desktop Version, on one of the pages (see private content) the little blue menu bar marker that shows which page you are visiting at the moment will flip to another page and then back and I can’t figure out why.
I provide an admin login
kind regards
BenHey Urs,
I checked your site both on desktop and on an Android phone using Chrome, but I can’t see any problems on my end. Could you let us know which steps you are taking to reproduce the problem please?
Best regards,
RikardHi Rikard,
thanks for your message.
Problem 1 on iOS (iPhone 13, 14pro) with Safari and Chrome (on desktop it works fine with all browsers). Like stated on mobile the links jump to the end of the anchored block, instead of the beginning.
Problem 2 only appears to happen on MacOS with Safari, I just tested it with Chrome on MacOS and it worked fine.
hope that helps,
kind regards
Ursbut that ID is only once on your page? or do you have a desktop version section – and a mobile version section.
An element that should not be displayed is still present in the DOM.
A lot of users do that to have better responsive behavior. – Test if on that page your anchor ID exist only once as #id.Hi,
1- Please try using the full link with the anchor and check if that fixes the issue. Safari is a bit problematic when it comes to anchor links.
2- Using full links with the anchor may fix this issue as well. If it doesn’t, please try deactivating all active plugins and check if fixes the issue.
If that doesn’t work, please send us a link to your login page as well. /wp-admin and /wp-login.php didn’t work for me.
Regards,
YigitHello,
I found this thread in a search because I am having the same issue.
An anchor link in the menu works flawlessly on desktop and on an iPad (including portrait orientation) in Chrome/Firefox/Safari, but doesn’t work at all on iphone/Safari. Tapping the link in the mobile menu closes the menu, but doesn’t scroll down to the anchor link whether you are on the homepage or any other page.
My client has noticed the issue, and wants to keep the anchor link so I need a fix if there is one.
Thanks in advance!
Hi,
Your section with the ID #samplewebsites is hidden on small mobile devices:
probably because you wanted to show the next section only on small mobile:
but that section has no ID, so the mobile menu can’t link to it.
Note that all IDs on a page must be unique and used only once, so to correct your issue, add a ID to the second color section like “mobilesamplewebsites”
then add a second menu item under the current samplewebsites menu item, with the custom classes “av-desktop-hide av-medium-hide av-small-hide” and a link of #mobilesamplewebsites
and then add the custom class “av-mini-hide” to the current samplewebsites menu item.Best regards,
MikeHello Mike,
My bad for not inspecting the responsive properties on these sections added by the business owner – but thank you for checking this and providing a perfect solution! I appreciate it so much; the great support of the Enfold theme is one of the many reasons I keep licensing it for new projects!
Best regards,
RhondaHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Anchor links not working correctly in mobile menu’ is closed to new replies.