Before you ask please READ THIS

Blue frame on :focus menu button state


I'm facing an issue with one of my Rife theme websites that I don't have with any other.

When I click in a menu button, it creates a blue glowing frame around it. Playing with the chrome console, I noted that it only appear when in focus state.

Is it any option or any setting I wrongly changed at the customizer?
I'm attaching a print to show you guys what I'm talking about.

Thank you!
Captura de Tela 2019-02-19 às 09.12.53.png
208 x 196 - 26K


  • AirAir
    Posts: 10,391
    Hello :-)

    The thing that you see is focus ring, that is a way that browser marks selected interactive elements. It is very important for disabled users or users who use the keyboard to navigate on websites.

    Thanks to this they know where they are on your webpage.

    It was part of the recent update that improves theme accessibility. Read more

    I highly discourage removing it.

    With kind regards.
  • Oh, that's great! Didn't even think about it. Nice to know that Rife theme received this as an improvement, it's indeed really important to design for everyone - not a single person excluded.

    Is it anyway I could make the focus ring a little smaller than the whole header?
    I'm going to follow your advice and won't remove this features. Thank you.

    Hope I could make it smaller, though. As it is right now, it could be seen as an error for some users.
  • AirAir
    Posts: 10,391
    Hey :-)

    I understand, that it might not look most pretty currently, but I don't think there is any CSS value that could make it smaller as it is directly connected to the height of the element.

    If you like you can remove this outline, and add for example background color with this custom CSS:
    .top-menu i.sub-mark:focus {
        outline: none;
        background-color: red;
    WIth kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!