Removing hover underline from a linked dropdown header

[opkramer]

Hello, 

I am running Refresh 2.0.2 currently as my shop's theme (URL: http://www.wildherdtx.com). I wanted to make the main navigation header that has nested items/sub links below it clickable (menu item: Livestock), so I added the bit of code recommended from another post of @BSS-Commerce:

<span {%- if link.child_active %} class="header__active-menu-item"{% endif %}><a href="{{ link.url }}">{{ link.title | escape }}</a></span>

 I then edited the color of the menu item and the caret symbol in base.css because once I made it clickable it changed the color. 

.header__menu-item a:first-child{
  color: #54281B;
  text-decoration: none;
  }

.header__menu-item svg path{
  color:#54281B;

I previously had the other menu navigation items underline upon hovering, but the Livestock link (with nested items) always had a thicker underline than the other menu items. I tried removing the underlines from the navigation bar, and the code I used worked to remove the hover underline from non-nested navigation menu items, but the one nested menu link still has the thick underline. Here are all the things I already have in the bottom of base.css to remove the hover underlines which have only worked for the non-nested items:

}
 .header__active-menu-item{
         text-decoration: none !important;
 }
.header__menu-item:hover span {
text-decoration: none !important;
}
.site-nav__label{
border-bottom: 0px !important;
}

Any ideas? Thank you! 

Best, 

[Moeed · Accepted solution]

Hey @opkramer 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
summary.header__menu-item.list-menu__item.link.focus-inset {
    text-decoration: unset;
}
</style>

[opkramer]

Thank you very much, that did the trick!

Best, 

[made4Uo]

Hi @opkramer 

You can use the code below to remove the underline.

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the base.css file

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

Result here: