How can I remove the underline hoovering effect from a filter section?

Store Design
, ,

Topic summary

A Shopify store owner wants to remove the underline hover effect from their collection filter section.

Problem Details:

  • Underline appears when hovering over filter options
  • Initial CSS solution removed underline from text but not from the arrow icon

Proposed Solutions:

Multiple users suggested adding CSS to the base.css file (at the bottom):

  1. Basic fix: .facets__summary span:hover { text-decoration: none; }
  2. More specific targeting: summary.facets__summary.caption-large.focus-offset span { text-decoration: none !important; }

One user also recommended removing a specific line (1710) from base.css to eliminate box shadow effects from the sort-by dropdown.

Status: Partially resolved - the text underline was removed, but the arrow hover effect persists. Additional CSS targeting may be needed for complete resolution.

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

Hi Guys,

I want to remove the hoovering effect (UNDERLINE) from the filter section. Please see the screenshot for a better understanding. I would appreciate your help.

URL: http://basicbastard.co/

Screenshot 2022-11-24 at 8.48.35 AM.png
Screenshot 2022-11-24 at 8.48.35 AM.png2880×1800 491 KB

Screenshot 2022-11-24 at 8.47.53 AM.png
Screenshot 2022-11-24 at 8.47.53 AM.png2880×1800 339 KB

2

@basicbastardco ,

.facets__summary span:hover {
    text-decoration: none;
}

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

1 Like
3

It worked but only for the text. If I hover over the arrow then the underline still visible while hoovering.

4

Hello @basicbastardco ,

I would like to give you the recommendation to support you

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

2 Likes
5

Hello @basicbastardco

Add this CSS bottom of the base.css file.

.facets__summary:hover span {
text-decoration: none !important;
}

1 Like
6

@basicbastardco

summary.facets__summary.caption-large.focus-offset span {
    text-decoration: none !important;
}
summary.facets__summary.caption-large.focus-offset span {
    text-decoration: none !important;
}

Apply above css for remove underline below of price and availability filter into your base.css file (online store->theme->base.css)

Ujjaval_0-1669282888015.png
Ujjaval_0-1669282888015.png1409×712 141 KB

Remove this line on base.css file line number : 1710 to remove box shadow effect into sort by option

1 Like