Menu item remains highlighted after click on single page

Hello Tomas,

It seems that your theme adds a special focus pseudo-class on the menu links (:focus-within). You can easily bypass this by adding the following to your CSS:

#-pro-menu-46-35 .oxy-pro-menu-list .menu-item.menu-item.menu-item.menu-item a.__mPS2id:focus-within:not(:hover) {
    color: #018447;
    background-color: transparent;
}

Let me know if it works the way you want 🙂

Hi Malihu.

thank you for your prompt reply. I am not a big fan of workarounds. I would rather find the reason why it is happening then creating some workarounds. I have this issue on all of the single pages. And I am concern that this issue did not appear before.

 As I mention before, when I disable PSTID plugin, menu items behave normally. Even pseudo class :focus-within. works fine. Same way as hover. If you want, I can disable the plugin to see how it behaves.

BR

Tomas

No problem. The issue doesn’t happen when the plugin is disabled probably because the URL in browser’s address bar gets changed (the hash #id is added in the URL) so the focus is no longer on the link. This of course doesn’t happen when the page scrolls smoothly to the target). You can of course test that the focus is gone when you click anywhere on the page.

The :focus-within and its styling is added by your theme (“Page scroll to id” has nothing to do with this). This is the CSS of the theme which makes the focused link highlighted:

#-pro-menu-46-35 .oxy-pro-menu-list .menu-item.menu-item.menu-item.menu-item a:hover, #-pro-menu-46-35 .oxy-pro-menu-list .menu-item.menu-item.menu-item.menu-item a:focus-within {
    color: #ffffff;
    background-color: #018447;
}

By adding the CSS I posted, we simply “reverse” this highlighting for the “page scroll to id” menu links.

If this focus-highlight behavior didn’t happen before it’s probably because it was added after a theme update. Have you updated the theme recently?

This whole issue is not something abnormal or a bug etc. If the theme highlights the focused link then it’s a normal behavior.

In short, the reason this happens is because the theme highlights the focused links and the links stay focused seemingly because the page’s URL in the browser’s address bar does not change (due to plugin’s smooth scrolling functionality).

Maybe you can test this by going to “Page scroll to id” settings and enabling “Append the clicked link’s hash value to browser’s URL/address bar” option.

Hi Malihu.

I am using Oxygen Builder to create templates and pages. I am not sure where the :focus-within  styling comes from. Perhaps it is hardcoded in Oxygen Builder and they just linked it with hover styling. It looks that they added only to nav menu, because on other links it is not defined.

You are right, only options is to remove styling from pseudo class on menu. Any other options are not working.

Thank you for your help.

BR

Tomas

Yes, I can’t really tell exactly where the :focus-within styling resides because all CSS in your theme are truncated (i.e. combined) and cached.

In any case, it’s not something you should worry about. The focus styling is added via CSS and we overwrite it with CSS 😉

You’re welcome and let me know if you need more help.