Mobile Menu Blue Color Box

Hi @sugarcode,

The outline is to indicate focus, which is useful for visitors who use keyboard navigation. Some browsers also show them on click/tap. I wouldn’t recommend disabling them for accessibility reasons, but you can do so by going to Appearance → Customize → Additional CSS (the menu labels might be different in your language), where you add the code below:

a { outline: none !important; }

— Anders

Hi Anders,

Thanks for the answer but the problem is not solved.

Screenshot. The blue box appears when touched.

I would be very happy if you help.

Hi @sugarcode,

The Menu link is a button disguised as a link, so you’ll need to amend the code like this:

a, button { outline: none !important; }

— Anders

Hello,

I tried but it didn’t work ?? Is there any other solution? Screenshot

Thank you.

@sugarcode Can you post a link to the site?

On the DEMO site, when you press “menu” in mobile view, there is a blue box.

Screenshot.

@sugarcode Which device and browser are you using?

Google Chrome and Opera. Huawei, Samsung and Apple devices.

@sugarcode Give this a try:

button { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; }

I’d also recommend you to remove the outline CSS I posted above, since that didn’t fix it (and will reduce the accessibility of the site).

Thank you very much, the problem was solved. <3 Thank you very much for your support.