A Shopify store owner is experiencing an issue with their custom header navigation hover effect. The hover styling works correctly, but it also triggers on the active/current page, which should remain unaffected with black text.
Problem Details:
Proposed Solutions:
Three community members offered CSS fixes:
</body> tag to prevent hover on active items.header__menu-item:hover .header__active-menu-item selector to set white color with !importantheader .header__menu-item:hover { color: #fff; } to base.cssAll solutions include code snippets and one includes a result screenshot. The issue remains unresolved as the original poster hasn’t confirmed which solution worked.
Hello,
Is someone able to help me with one small error in my header navigation button hover effect that I have just coded?
It looks how I want it, except that I do not want the active page to trigger the hover effect, the text is also black in the active page. Is someone able to help me add something to my code in base.css to fix this?
See attached screenshots. Thank you very much in advance.
URL: https://sausagesociety.myshopify.com/
PW: ellaella
Hey @ellacoker
Follow these Steps:
Go to Online Store
Edit Code
Find theme.liquid file
Add the following code in the bottom of the file above tag
RESULT:
If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Hello @ellacoker
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.
.header__menu-item:hover .header__active-menu-item {
text-decoration-thickness: .2rem;
color: white !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hi @ellacoker
to make the active menu item have white color. let try to add this code to end of file base.css:
header .header__menu-item:hover{
color: #fff;
}