Removing blue outline around selected button on mobile

Solved
Highlighted
New Member
2 1 0

I have had a very similar issue to the guy on this thread:

https://community.shopify.com/c/Shopify-Design/Debut-Theme-Removing-a-border-from-a-menu/td-p/479019

 

Which was solved thanks to @Dakota_Smith by editing the 

.site-nav__link--button

section and forcing the outline to have a value of 0 in focus.

 

 

My issue persists, however, on mobile. 

The drop down menu my theme (Debut theme) switches to on mobile shows a blue outline around the button once selected. Given the color scheme of my site, it just looks horrible. Here's an example:

 

 

I believe the fix would still be in theme.scss.liquid and likely under a 

.mobile-nav 

section of the code, but I don't know enough CSS to be able to find it or its alternative.

 

0 Likes
Shopify Partner
440 62 125

I think the issue you are experiencing is the same as another poster & I were discussing yesterday and fixed. https://community.shopify.com/c/Shopify-Design/iOS-13-blu-selection/m-p/641766#M160403

 

 

If helpful then please Like and Accept Solution
0 Likes
Highlighted

Success.

New Member
2 1 0

@JonWright Awesome!

 

Elegant solution. This fixes it perfectly.

 

On my Shopify Admin page, I navigated Online Store > Themes > Actions > Edit code

Under the Assets category I clicked on {/} theme.scss.liquid and pasted the following code at the bottom:

 

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {  outline: none;
}

 

Thanks again!

0 Likes
Highlighted
Shopify Partner
440 62 125

No problem. Glad it worked.

If helpful then please Like and Accept Solution
0 Likes