How to remove the outline that appears when clicking a menu item

When you click on a menu item, you may notice a colored outline appear

This outline (sometimes mistaken for a border) is added by your browser because you have set focus on an element by clicking it.

This is an accessibility feature of the browser. It provides a visual cue that a particular element has focus. This is especially important for users who are navigating via a keyboard or voice control rather than a pointer device like a mouse.

UberMenu does not add a focus outline unless you are navigating with the keyboard (see Keyboard Accessibility & the Blue Outline / Glow). If you see an outline when you click, that style is added by the browser (or sometimes modified by the theme).

If you wish to remove the outline from UberMenu elements, you can add this CSS

.ubermenu *:focus{
    outline:none;
}

However, please keep in mind that accessibility is very important. If you remove the focus outline, you should provide some other visual cue to your visitors that an element is focused.

The :focus-visible pseudo-class can also help with this. It allows you to apply special styling only to focused elements that require a visible indicator. If you remove the :focus state styling, make sure that :focus-visible still gets styled for accessibility purposes. Please note that not all browsers support :focus-visible as of this writing.

On this page