Prestige Theme: Header Menu Hover

[weartraum]

Hi all,

I've got the prestige theme and managed to remove the underline hover on the left navigation. My navigation on the right side has a beautiful sleek hover effect where the text get's darker on hover. I want that same effect on the left menu navigation but didn't manage to do so.

anyone with ideas or codes?

www.weartraum.com

pw: traum121

[Moeed]

Hey @weartraum 

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>
li.header__primary-nav-item a {
    color: rgb(var(--text-color) / .65) !important;
}
li.header__primary-nav-item a:hover {
    color: black !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[weartraum]

Hi Moeed!

wow! thank you for your fast reply.

I managed to fix it, but the only thing that is missing now is the smooth transition from one to the other color, check the navigation on the right side maybe you'll find the code that is missing!

Appreciate your help!

[Moeed · Accepted solution]

Hey @weartraum 

I have made the changes in your theme files and added the smooth transition effect too, feel free to check it out!

Best Regards,

Moeed

[DaisyVo]

Hi @weartraum 

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for "theme.liquid" file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for </head> tag and add the following code above </head> tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
li.header__primary-nav-item a {
    transition: color .2s ease-in-out;
}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.