Solved

Removing hover underline from a linked dropdown header

opkramer
Tourist
3 0 1

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, 

Accepted Solution (1)

Moeed
Shopify Partner
3878 980 1224

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

 

Capture.JPG

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 3 (3)

Moeed
Shopify Partner
3878 980 1224

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

 

Capture.JPG

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
opkramer
Tourist
3 0 1

Thank you very much, that did the trick!

 

Best, 

made4Uo
Shopify Partner
3833 716 1166

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:

made4Uo_0-1685116112668.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free