How to get rid of underline on mega menu heading

Store Design
, , ,

Topic summary

Issue: In the Shopify Dawn theme, menu items show an underline on hover. The requester wants to remove it from a mega menu heading.

What was tried:

  • CSS added to base.css targeting .header__menu-item:hover span and .list-menu__item:hover span to set text-decoration: none. Reported as not working.
  • A generic suggestion to add a class selector in theme.liquid (insufficiently specific). Also reported as not working.

Newest suggestions:

  • Add CSS via Theme settings → Custom CSS to remove hover/focus underline on .header__menu-item and, if needed, on .header__submenu-item, using !important.
  • Request for store link to inspect specifics.
  • Another CSS suggestion targeting .header__active-menu-item (affects active item state, not hover).

Context/notes:

  • The underline likely comes from default text-decoration on menu link elements in Dawn; correct selectors and specificity (possibly with !important) are needed.

Status: Unresolved. The original attempts did not work; newer, more specific selectors and a request for the store URL are pending confirmation.

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

using dawn theme how do i get rid of this underline every time i hover over a menu item

image
image840×133 7.1 KB

1 Like
2

Hi @JGBowie

To remove the underline on hover in the Dawn theme, add this CSS code to the very bottom of your base.css file

/* Remove underline from header menu links on hover */
.header__menu-item:hover span {
  text-decoration: none;
}

.list-menu__item:hover span {
  text-decoration: none;
}

Try this out and let me know how it goes!

Hope this helps!

3

Hi,

To remove the underline style, please add this css to the theme.liquid file:

.class-name-of-menu {
text-decoration: none;
}
4

didn’t work :confused: unfortunately

5

This did not work :confused:

6

Here’s a simple, helpful reply that positions you as someone who can solve the issue quickly:

You can remove the hover underline in Dawn — it’s just a default text-decoration style on menu links. The easiest fix is to add a small piece of CSS:

Online Store → Themes → Customize → Theme settings → Custom CSS

.header__menu-item:hover,
.header__menu-item:focus {
  text-decoration: none !important;
}

If it still shows underlines in dropdown menus, add:

.header__submenu-item:hover {
  text-decoration: none !important;
}

This will remove the underline for all navigation items on hover in the Dawn theme.

If you want, I can also check your exact theme version and clean it up so everything stays consistent.

7

Could you share the link to your store?

8

Hello, @JGBowie

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / base.css file and paste the code in the bottom of the file.

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

Thanks!