Header Navigation Hover effects

[ellacoker]

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

 

[Moeed]

Hey @ellacoker 

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>
.header__active-menu-item:hover {
    color: white !important;
}
</style>

RESULT:

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[GTLOfficial]

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

[BiDeal-Discount]

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