Underline in nav menu for desktop

[rachelgongster]

Hi there, 

I'm currently using the Dawn theme for my website, "mykinchan.com", and I watched some youtube on how to remove the underlines from the nav menu . But, the solutions, while helpful, haven't been a perfect fix for the desktop version of my site.

I've added these codes at the bottom of my base.css file:.header__active-menu-item { text-decoration: none; }

.header__menu-item:hover span { text-decoration: none; }

details[open]>.header__menu-item { text-decoration: none; }

.header__submenu .header__menu-item:hover { text-decoration-line: none; }

and they've been able to help me remove all underlines from both my main and sub menus for mobile.

The main menu items that have dropdown menus are still underlined. And once you click on the main menu items, the sub-menu items get underlined. Is there a solution to this? Thanks in advance!

[Dirk]

Hey, @rachelgongster 

I'm not formally trained in code to provide you with an exact solution to add an underline in the navigation menu. However, I'm confident one of our Shopify experts would be able to accomplish this at a reasonable price.
 
Just wanted to share this as an option in case you are unable to find a coding solution in your thread.

If there is anything else I can help you with, please let me know.

[conversionist]

Try adding this code to your base.css file

1. Go to Online Store > Themes > Actions > Edit Code.
2. In the Assets folder, open your base.css file.
3. Add this code at the end:

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

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

Save the changes and refresh your site This should remove all underlines from the navigation menu on the desktop version

[rachelgongster]

This works - thank you so much for the quick help! 

I also found another fix on another thread, which is to add this code: 

ul.list-menu.list-menu--inline a {

    text-decoration: none;

    color: black;

}

Thanks so much again!😀

[conversionist]

You're welcome

[rachelgongster · Accepted solution]

Hi simo,

Sorry it looks like it didn't work after all - I think my cache wasn't cleared from the previous code fix.

I went with:

ul.list-menu.list-menu--inline a {

    text-decoration: none;

    color: black;

} 

instead and it works.

Thanks so much though!

Best,
Rachel