How can I modify menu link hover effects in the Modular theme?

[jr-rl]

Hello everyone,

When hover over linked menu items an underline appears under the link. I want to remove the underline and just make the text turn slightly lighter (as seen in images)

Could someone please help me which code to add, thank you!!

Theme is 'Modular'

 

 

I want it to look more like this 

 

 

[Alok_Kasgar]

Hi @jr-rl  Add below css

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>
.menu-item__link:hover{
opacity: 0.7!important;
}
.menu-item__link:after{
border-bottom: none!important;
}
</style>

[Jasoliya]

@jr-rl 

Add this code in css file at bottom 

.menu .menu-item .menu-item__link:hover:after{border-bottom:none;}

[jr-rl]

Thank you! this worked for the main menu but didn't work for the submenu drop down links. Is there a way to also make them behave the same.

I have tried the same code but replaced .menu-item__link:hover with submenu-item__link:hover but that did not seem to work 

[Jasoliya]

Add this code in same file

.submenu-item .submenu-item__link:hover:after{border-bottom: none;}

[websensepro]

1. Go to online Store

2. Edit the code

3. File name base.css

4. Pasted this code   

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

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

[GemPages]

Hello @jr-rl 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

You can try with below code:

.menu .menu-item .menu-item__link:hover:after{
  border-bottom:none !important;
}
.menu .menu-item .menu-item__link:hover{
  font-weight: 100 !important;
  padding-left: 10px !important;
}

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.