Hey Folks!

On 24th & 25th February 2020 I will have limited access to help you on the support forum, as I will be traveling all day.

Answers to support questions may be delayed and answered on Monday 26th February 2020.

Sorry for any inconvenience.

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,226
    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 https://apollo13themes.com/rtl-support-accessibility-improvements-and-raised-minimum-php-version/

    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,226
    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!