Menu Hover Effect

[bringsjo]

Hello Support,

I need assistance with my hover effects in my header menu. It appears when I hover over “home” no color changes even though I have clearly marked in the code the change. For some reason it seems to be reversed in the theme editor.

I have also tried to add a fade transition ease-in/ease-out effect to the header menu links. However, I have been unsuccessful. Could you please let me know how to achieve this?

Website: www.jensbringsjord.com

Thanks in advance!

[rad]

Hi @bringsjo,

Thanks for writing in.

The hover and active status have the same styling. And since you loaded the home page, then that makes the home menu item as the active item. Try adding a new page and new menu item, and load it and you’ll see what I mean

The hover effect is only applicable to non-active items.

Thanks!

[bringsjo]

Hi @Rad,

Thanks for your response. I appreciate it.

I am specifically wondering how to apply the hover effect that fades in transition in the menu bar.
I believe I need to use something like the following code, however, I can’t seem to get it to work!

-o-transition:color .2s ease-out, background 1s ease-in;
-ms-transition:color .2s ease-out, background 1s ease-in;
-moz-transition:color .2s ease-out, background 1s ease-in;
-webkit-transition:color .2s ease-out, background 1s ease-in;

transition:color .2s ease-out, background 1s ease-in;

Any help in this area would be greatly appreciated.

Cheers,
Jens

[ruenel]

Hello Jen,

Your site is under construction mode. Would you mind providing us some access to your site so that we can take a closer look at your header and might give you a tailored solution for your menu roll overs.

Thank you in advance.