How To Remove Header Underline on Hover (Taste Theme)

Store Design
, , , , ,

Topic summary

A user working with Shopify’s Taste Theme wants to remove the default underline effect that appears when hovering over header menu items. They prefer replacing it with an opacity change instead.

Solution Provided:

  • Add custom CSS code to the bottom of the base.css file
  • The CSS targets .header__menu-item:hover span with:
    • text-decoration: none !important;
    • opacity: 0.6;

Status: Resolved - the user confirmed the solution worked successfully.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am currently designing my site using the Taste Theme and have run into a problem.

I would like to remove the underline that pops up on the header menu when it is hovered over. I would like to replace that with an opacity change on hover. (View reference site for that effect example)

Any help is very much appreciated. Thank you,

Tyler

My Site: https://muddytrenchwear.com/

Reference Site: https://jaronbaker.com/

2

Site password = MTT2023

3

Hi @Tylerverdee you can do that by adding this CSS code at the bottom of your base.css file

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

Thank you very much

1 Like
5

Happy I could help.