How to remove highlighted area around menu box on mobile

Store Design
, , , , , , , , , , , , , , ,

Topic summary

A user wants to eliminate a gray highlighted box that briefly appears when tapping the menu button on mobile.

Proposed Solution:

  • Add CSS code to the bottom of the stylesheet to remove focus/active states on buttons and links
  • The code targets outline, box-shadow, and background properties, setting them to none or transparent with !important flags

Status: A solution has been provided but not yet confirmed as tested or resolved by the original poster.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I’m looking to remove the highlighted gray box when it appear as you press the menu tab on mobile

(it happens for a split second)

url knmb1c-pf.myshopify.com

password samurai

IMG_9514.jpg
IMG_9514.jpg873×2460 51.6 KB

2

Hi,

Scroll to the bottom of CSS file and add this code

CSS code example

button:focus, button:active,
a:focus, a:active {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}