How can I remove the underline from links in my online store?

Store Design
, , , , , , ,

Topic summary

Goal: Remove underlines from links across the store (menu, collapsible content, and on click/active states), including the account page.

What was tried: Adding CSS in Assets > base.css (or base.scss.liquid) to remove hover underlines, e.g., targeting .header__menu-item:hover span and .collapsible-content summary:hover .accordion__title. This fixed hover but not clicked/active underlines.

Broader fixes suggested: A global reset for links (a, a:link, a:visited, a:hover, a:active { text-decoration: none }, often with !important) and targeting active menu items (e.g., span.header__active-menu-item) to ensure theme overrides.

Latest update: To stop underlines when links are clicked/active, expand the selector beyond :hover to .header__menu-item span with !important. This was reported by others to resolve “all underlining issues,” likely covering account page links as well.

How to apply: Online Store > Themes > Edit code > Assets > base.css; paste the rules at the bottom to override theme styles.

Status: Appears resolved for respondents; OP didn’t explicitly confirm final resolution.

Summarized with AI on December 23. AI used: gpt-5.
1

Hi,

I am looking to remove the underline on the links on my store whenever you hover over them or click them.

This includes the menu links and also the collapsible content links.

My store for reference:

www.mmmtrading.co.uk

2

@mmmtrading
Hello,

.header__menu-item:hover span {
	text-decoration: none;
}
.collapsible-content summary:hover .accordion__title {
	text-decoration: none;
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

3

You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css.
Step 3: Paste the below code according your requirement

span.header__active-menu-item {
    text-decoration: none;
}

a{text-decoration: none !important;}

a:link { text-decoration: none; }

a:visited { text-decoration: none; }

a:hover { text-decoration: none; }

a:active { text-decoration: none; }
1 Like
4

@mmmtrading - add this css to the end of your base.css file and check

a, a:hover, a:active, a:focus{text-decoration:none !important;}

.header__menu-item:hover span {text-decoration: none !important;}
1 Like
5

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code

  2. Find Asset >base.css and paste this at the bottom of the file:

.header__menu-item:hover span {
    text-decoration: none;
}
.collapsible-content summary:hover .accordion__title {
	text-decoration: none;
}
6

Hi @mmmtrading

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

  • Go to Online Store->Theme->Edit code
  • Asset->base.css
  • Paste the below code at the bottom of the file

.header__menu-item:hover span{

text-decoration:none !important

}

Hope my solution works perfectly for you!

Regards,

Victor | PageFly

7

It appears to remove the hover underline however when clicked it still shows the underline. Furthermore, there are also underlines on the account page that i would like to remove.

Any further help would be much appreciated.

8

Hi @mmmtrading ,

You can replace old code with new code:

.header__menu-item span{

text-decoration:none !important

}

Hope my solution works perfectly for you!

Regards,

Victor | PageFly

9

THIS!!! for all underlining issues

10

this one worked for me thanks