When using a mobile device the anchor links don’t seem to work consistently. They may work the first 5-6 times when clicked but then usually stop working and make the screen flash or don’t move the page at all. This is both on the side mobile menu and when clicking the icon in the corner which should link to the top of the page. I have tried using custom code to fix this and adjusting settings within bricks but nothing has given me a consistent solution. It works fine in developer tools/ responsive design mode on my computer but fails on an actual phone.
scroll-margin-top: 100px; /* works /
scroll-margin-top: 10%; / invalid */
It seems scroll-margin only accepts length units like px, not percentages. Could you try setting it to px and test again? If it still doesn’t work, you could temporarily remove the scroll-snap-align style for testing.
If the problem continues, I’d suggest disabling your custom snippets one by one to see which one might be causing it. I noticed you have:
Dark/light mode on load
Scroll-based navigation highlighter
Scroll-based element blur effects
Fading particles following the mouse
These are just temporary suggestions. Maybe someone will reply soon with a better solution.
Thanks Binu, that seemed to help isolate the issue. The scroll works fine when the snap is set to ‘proximity y-axis’ but breaks if it is ‘mandatory y-axis’. Unfortunately, changing the margin to px didn’t change the outcome.
Mm, okay — if that’s the case, disable scroll snap when running #link scrolling in your JS code. I mean, you already have to add an active state to your navigation links, so try changing it so that when clicked, it disables scroll snap and then enables it again after about 800 ms.
Maybe try asking ChatGPT and make sure to prompt properly. You might get a better solution. I’ve shared everything I know, and I’m not fully sure about this one. You might need to dig in a bit more or wait for someone else to chime in.
Thanks Binu, I tried this solution, but unfortunately doesn’t seem to help. It also seems after further testing the ‘proximity y-axis’ fails after a scrolling and using the menu eventually.
I can replicate the issue on my iPhone, but I don’t know exactly why it’s happening. Sure, it’s connected to the scroll-snap, but I have no idea what the cause of it.
The HTML and CSS look correct, but there are many HTML elements, and there may be some JS conflict, maybe a plugin getting in the way… ).
Overall, it does not look like a Bricks bug, but to be sure, we would need to dig deeper, so if you can create a staging website, where we could check what is happening freely without affecting the live website, and send us the temporary login credentials to your test/staging website and a link to this topic to help@bricksbuilder.io using the email address you used during the purchase, we could take a look.
works /
invalid */