Show blue border when menu link is click

Can you provide the URL of your site?

No I can’t for professional reason.

It’s something that only happen on Chrome and Safari. I don’t have this problem with firefox. Also it’s a different color when I try it with Chrome on my phone

Are you sure that’s not just the focus state of a link or button? If it is then you shouldn’t disable that, that’s meant to be there for people using their keyboards.

I don’t have any input on my page so if it’s a kind of focus it’s useless. But if it is how can I customize it? Can I customize the color or am I stuck with 2 different color?

I thought you could but not sure anymore, I don’t think you can target chrome specifically here.

Maybe it’s a bug if there’s no actual interactive element on the page. Have you checked the developer tools in chrome to see what it’s actually focusing on?

Yeah but I didn’t find anything. I still don’t understand why Firefox seem immune to this “bug”

We’re in more of a confused and less informed position not seeing the webpage with the issue

Find out what was causing the bug. I was calling skip-link-focus-fix.js in my code and it was adding tab-index in my rows.

Oh I think that was put in place to fix an actual bug. The bug is where if you press a link that goes to a section of content your viewport may be moved to that content, but your focus remains on the pressed link (that bug doesn’t exist in Firefox). So that file was probably doing a good thing.

What a lot of people do is they hide the skip link off the screen and then only when it’s focused on do they show it – so people don’t click on it and that blue border isn’t shown for just anyone. It’s shown for people who need it.

E.g. you could try:

.skip-link {
    direction: ltr;
    left: -999em;
    position: absolute;
}

.skip-link:focus {
    position: static;
}

I’ll search more about this to be sure. Thanks for the help ??