Menu image hover swaps

[mgiraud]

Hi. I’ve figured out how to add an image to my menus, but my research hasn’t shown a way to add a hover-state image to them. I’d guess that would be “Image Secondary,” but when I put an image URL there, nothing happens.

Any suggestions? I’m not using UberMenu, btw.

Thanks in advance.

[marc_a]

Hi Matt,

Thanks for reaching out!

I also wasn’t able to make it work on my development website. I am not quite sure why it is not working but I have a workaround on this scenario.

Add the image source in the Navigation Label, see the example below.

<img src="/wp-content/uploads/2021/05/q-logo-2.png" class="hover-show">Sample Page

As you can see, I added hover-show class name in the image because that selector is usable to play around with CSS.

Then, please add this CSS code in your Pro > Theme Options > CSS.

.hover-show {
  visibility: hidden;
}
.x-menu li a:hover .hover-show {
  visibility: visible;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[mgiraud]

Thanks so much for the quick response, and brainstorming a strategy. Unfortunately, when I replicated your suggestion it did work, just not in the right place (see attached - default on top, hover on bottom).

Could you log the not-working Secondary Image functionality as a bug to address in a future version?

Thanks for the great support!

[marc_a]

Hi Matt,

I went ahead and check your development website but I couldn’t able to replicate the issue in your screenshot because this is what I see when I hover the submenu item.

I suggest that you apply the changes that I mentioned above so that we can give you an idea on how we can fix it.

Hope that helps.

Thank you.

[mgiraud]

Sorry, I undid the changes since I didn’t think a fix was possible.
I’ve now put them back for Solutions > Strategy, so feel free to take a look. Thanks!

[ruenel]

Hello Matt,

Sorry for the confusion. To get your issue resolved, you will have to do the following:

1.) Supply the images for the primary and secondary images in Appearance > Menus.

2.) Edit your header and click the navigation inline element.

3.) In the Navigation Inline > Sublinks > Graphic Image, you need to enable the “Secondary” option.

The images should swap as soon as you hover over the sublinks:

Please check your site now particularly the “Strategy” sublink. You may need to supply images for the other sublinks as well.

[mgiraud]

Awesome! Works like a charm. Thanks so much for the great support!

[ruenel]

You are most welcome.