How can I apply the same hover effect to all nav menu links?

Store Design
1

Hope you can help me out.

I’m trying to figure out how I can make the on hover effect on the links same with the active main nav as seen in the screenshot below.

(I want the home hover design to be same with the other nav menu links.)

NavMenu.png
NavMenu.png455×237 5.46 KB

Website: https://sparkt-outdoor-gear.myshopify.com/

Pass: 12345

2

Go to your Online store > Themes > Edit code > base.css, add those code at the bottom of file

.header__menu-item:hover {
color: #d4643c !important;
}
.header__menu-item:hover span {
text-decoration-thickness: .2rem;
}
3

Hi there Jbvergara.

Copy and paste in the following code inside your theme.liquid file, right above .

Online Store > Themes > Edit code > theme.liquid
4

Hi @jbvergara ,

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Add this CSS at the bottom

Online Store ->Theme ->Edit code

Assets → base.css

.header__menu-item:hover .header__active-menu-item {

    text-decoration-thickness: 1.5px !important;

}

.header__active-menu-item {

    text-decoration: none !important;

}

.header__menu-item:hover span {

    text-decoration: underline !important;

}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

5

This one worked, thanks everyone!