Hello everyone, I am just getting around to finishing my website and I’ve ran into a bit of a speed bump. This pertains to tablet and cellphone screen sizes specifically. For some reason whenever I click a link in my nav menu and the viewport scrolled to it then the whole section is highlighted blue. Then, when I click a different part of my screen it goes away. It did not do this before i added different states to the nav links but since then I have reverted them back to how they were originally, but I still have the blue outlines. Also, this problem only happens in browsers and not the webflow prototype viewer. Any ideas on how I could fix this?
Please check out this link on a phone and click one of the nav items. Pay attention to how the section that’s linked to that nav item gets highlighted. www.lkcreate.us
Hmmm, I am currently viewing it on an iPhone X and I have viewed it both in google chrome and safari, both of which have the same issue. This is strange. I would like to upload a video I screen recorded but it’s not possible in this forum so I upload it on YouTube.
@lukas_kaiser — My apologies for missing this reply a while back and thanks for the video illustrating the issue.
If you haven’t already found the solution, basically you need to either remove (or restyle) the focus state of the section. iOS apparently started adding focus states on sections — commonly found on links to aid in accessible, mouse-less navigation — but thankfully you can styles these states natively in the Designer:
You can read a bit more about what the Focused state is (and what the difference between the two in the Selector dropdown) at the link below:
Don’t hestitate to reach out if you have any other questions