Question Elementor Menu - Hamburger menu has blue outline?! Removal help please!

[DesignerTex]

In mobile/tablet view the hamburger menu has a blue outline ONLY when I click on it. I guess like focus but can't remove it with focus. When I click off of it, the outline goes away. I've tried targeting everything I could fine with focus but nothing I did removed it. Any help?

 

[adiplomatt]

I scoured the internet and through much trial and error I was finally able to find some custom CSS that removed the blue focus ring (image attached). Here is what worked:

* {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important;
-webkit-focus-ring-color: rgba(255, 255, 255, 0) !important;
outline: none !important;
}

 

[Vywern]

More recent fix which worked for me, took a while to find this so I hope this saves time for others.

/** * The default focus style is likely provided by Bootstrap or the browser * but here we override everything else with a visually appealing cross- * browser solution that works well on all focusable page elements * including buttons, links, inputs, textareas, and selects. */ *:focus { outline: 0 !important; box-shadow: 0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */ 0 0 0 .35rem #069 !important; /* faux focus ring color */ } /** * Undo the above focused button styles when the element received focus * via mouse click or touch, but not keyboard navigation. */ *:focus:not(:focus-visible){outline: 0 !important; box-shadow: none !important; }