Are you looking to take out the outline (dotted or otherwise) from around menu (and other) links in your WooCommerce store – these links show up on click briefly, and look like this:
Storefront added a host of accessibility features a while back – in version 1.4 – which specifically included adding these features to improve the experience for visibly impaired visitors.
But what if you’d like to remove these borders, which form a “box” around your menu?
The snippet below, when added to your custom CSS (either in a child theme, or HINT using the Theme Customizations plugin) will remove this box:
Table of Contents
Remove the box around menu items in Storefront
What its doing – breaking it down
This code here is CSS, and its telling browsers to override (!important) any other rules they have been given about this “outline” on the “focus” event (i.e. when links are clicked). Specifically, we’re setting “outline” to “none”.
Worked for you?
Leave a comment below if this helped you today!
Get Silicon Dales to do it
If you’ve got WooCommerce problems, and you run a medium or larger business website on WordPress with WooCommerce, then you may be interested in our WooCommerce development services.
I have been trying to fix that for a good while. Thank you for your post.
I really wish they added an option to NOT have these nasty boxes aound clickable elements – they look really bad!
I will have to try this – thanks
Thanks a lot, it worked perfectly!!! Exactly what I needed!