Accessibility Glowing Blue Box - please help!

New Member
2 0 0

Hi,

I've found other threads about this issue but can't find the solution for the Narrative theme. I realize this is for accessibility but it looks horrible with the site design. Can someone show me how to get rid of this glowing blue box in the header? I've been trying to dig through the code but can't figure it out. Thanks!!

 

Screen Shot 2019-10-10 at 9.04.53 PM.png

0 Likes
Trailblazer
140 11 15

Hi @lysshouse,
You can remove that border adding this code on theme.scss.liquid

button.site-header__navigation.btn.btn--clear.btn--square {
    outline: none;
}
Let's make the best store!
Contact us at: thepremierstores@gmail.com
0 Likes
New Member
2 0 0

THANK YOU SO MUCH!!! I have been searching for this for 2 days! Thank you!!

 

0 Likes
Trailblazer
140 11 15

Your welcome,
please mark the topic as solved.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
0 Likes
New Member
2 0 0

Hi! I'm facing the same problem, but adding the code doesn't work on mine :( I'm using theme debut, is there any other way to get rid of the blue box?

0 Likes
Trailblazer
140 11 15

Hi @moonsmumble,
Use this one for Debut theme:

button.btn--link.site-header__icon.site-header__menu {
    outline: none;
}
Let's make the best store!
Contact us at: thepremierstores@gmail.com
0 Likes