Remove “box” from around links and menu items in WooCommerce Storefront

Remove “box” from around links and menu items in WooCommerce Storefront featured image
(Last Updated On: November 29, 2017)

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:

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

Silicon Dales