Solved

Underline in nav menu for desktop

rachelgongster
Tourist
9 1 1

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!

Accepted Solution (1)
rachelgongster
Tourist
9 1 1

This is an 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

View solution in original post

Replies 5 (5)

Dirk
Shopify Staff
2340 253 518

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.

Dirk | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

conversionist
Shopify Partner
55 7 9

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

 

Building 100 Shopify apps for that BMW M5 dream

Follow the journey at https://www.youtube.com/@conversinist
https://conversionist.online/
rachelgongster
Tourist
9 1 1

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
Shopify Partner
55 7 9

You're welcome

Building 100 Shopify apps for that BMW M5 dream

Follow the journey at https://www.youtube.com/@conversinist
https://conversionist.online/
rachelgongster
Tourist
9 1 1

This is an 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