To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

Nav Menu Fix

Solved
jbvergara
Excursionist
24 2 4

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

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

Pass: 12345

 

Accepted Solution (1)

Accepted Solutions
Dan_From_Ryviu
Shopify Partner
976 139 205

This is an accepted solution.

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;
}

 

Get 3 months of Shopify for $1/month. Sign up now
Ryviu - Aliexpress Reviews app - is a product review app with the ability to import reviews from Aliexpress, Amazon, Etsy, and DHgate. Over 46.000 stores use it.
Is it helpful? Like or Accept solution to let me know 🙂

View solution in original post

Replies 4 (4)
Dan_From_Ryviu
Shopify Partner
976 139 205

This is an accepted solution.

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;
}

 

Get 3 months of Shopify for $1/month. Sign up now
Ryviu - Aliexpress Reviews app - is a product review app with the ability to import reviews from Aliexpress, Amazon, Etsy, and DHgate. Over 46.000 stores use it.
Is it helpful? Like or Accept solution to let me know 🙂

jovilh
Explorer
41 4 8

Hi there Jbvergara.

 

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

Online Store > Themes > Edit code > theme.liquid

<style>
.header__menu-item:hover {
    color: #d4643c !important;
}
</style>

 

Jovil | Developer @ Tiburon
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
PageFly-Victor
Shopify Partner
5484 956 2305

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

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

jbvergara
Excursionist
24 2 4

This one worked, thanks everyone!