Active menu effect

Hi, anur.

To show hovered image on menu page just add to file style.css of your active theme this few strings:

.menu-item.current-menu-item a.menu-image-hovered .menu-image-hover-wrapper img.hovered-image {
    opacity: 1;
}

Hi Alex,

I don’t think Anur is looking for a transparency affect.

I have same requirement. Let me give an example: the menu image is grey.jpg, but it changes to white.jpg when it’s the current menu item.

Neo

I know, just try to add this code and see what is happen.

For better transparent effect I place the second image over the first, and hid the second image with opacity:0, so for .menu-item.current-menu-item just add opacity:1 and this should solve the problem.

Or have I got it all wrong again?

Hi Alex,

You’re awesome! It works.

I didn’t see how it would work because your plugin doesn’t ask for the hover image until the menu is saved. After I saved the menu, added hover image and saved a again, the CSS just works!

The only change I made to the CSS is I used current-menu-ancestor instead of current-menu-item because there is no current-menu-item on top level in my case.

Here is my css:

.menu-item.current-menu-ancestor a.menu-image-hovered .menu-image-hover-wrapper img.hovered-image {
    opacity: 1;
}

Thank you Alex!

Neo

You are welcome!