By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

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

D

DesignerTex

New Member
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?
 

Attachments

  • outine.jpg
    outine.jpg
    31.4 KB · Views: 166
A

adiplomatt

New Member
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;
}
 

Attachments

  • IMG_8006.jpg
    IMG_8006.jpg
    17.7 KB · Views: 160
Last edited:
V

Vywern

New Member
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; }
 

Latest posts

Latest Resources

Other Elementor Resources

elementor official
Top