How to get rid of underline on mega menu heading

Store Design
, , ,
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!