Remove outline of site title and logo when clicking on them

You can try this code

:where(.wp-site-blocks *:focus){

  outline: none;

}

Hi and thanks for this.

I’ve added the code and cleared the cache, but it’s not working, unfortunately.

Mike.

Hi @mikehindle, it also seems to work as expected from my end.

Could you please check if you added it as expected?

:where(.wp-site-blocks *:focus){

  outline: none;

}

Hey Felipe. Thanks for the reply.

Yes, it’s added exactly like that. I notice that on Safari it doesn’t do it, but on Chrome it does.

Here’s a screenshot if needed where you can also see the added code.

and with ?
outline: none !important;

Hey Fred.

Thanks for this. Just added it but it’s not changed anything, unfortunately.

Can you try this way to see if still doesn’t work?

:where(.wp-site-blocks *:focus) {
    outline-width: 0px;
    outline-style: inherit;
}

Hi Felipe. Thank you for this.

I’ve added it but still no change, unfortunately.

In this case, it really looks like some odd caching is applying on your site somehow. Have you tried to flush all your caching, even browser caching?

Ah ok no worries, Felipe. I have but I’ll try again and see what happens.

Thank you ??

Hi all. Just a quick update as this issue is now also affecting another site I’m working on.

The boxes show when clicking on any link and also on mobile they appear around the site logo and hamburger menu.

Here are some screenshots.

I know we didn’t reach a solution but just wanted to see if anyone had any other ideas.

This is the other site it’s affecting https://davidfoxmagicianmidlands.co.uk/

Hey @mikehindle – could you please try out this CSS instead?

:where(.wp-site-blocks *:focus) {
    outline-width: 0px !important;
    outline-style: inherit;
}

Man! I owe you ??

This has worked perfectly. So happy and really appreciate it.

Thank you!