UberMenu hover text background

Support
#1

Hi,

Im trying to make the ubermenu text background colour transparent but the text to turn yellow/orange on hover. Ive run through previous notes,but I cant see how to do it

Ive added the following code to the ubermenu custom css but its not working as expected.

.ubermenu.ubermenu-horizontal:hover{
background:rgba(255,255,255,.5);
}

Could you let me know what I should add to make the background for normal and on hover transparent and the text to change colour when hovered please.

Thanks,
Will

#2

Hi Will,

Thank you for writing in, please navigate to Appearance > Ubermenu > Main UberMenu Configuration > Style Customizations see the Top Level Background that is for the initial color and the Top Level Background [Activated] is for hover.

Hope it helps,
Cheers!

#3

Hi,Yes that fine if a solid colour is required but I cant see how to make it transparent if theres an image behind the text.

How do I do that please?

#4

Hi Will,

Here’s the guide:


This CSS is currently working:

.ubermenu.ubermenu-horizontal:hover {
    background: rgba(255,255,255,.5);
}

May we know what you are trying to achieve to help you better?

#5

Hi,

Its not working. Please see the original post for what Im trying to achieve. Simple text over the graphical background. The text highlights when you hover.

Hope that helps?

#6

Hello Will,

Please have your custom css updated and use this code instead:

.ubermenu.ubermenu-horizontal:hover{
    background:rgba(255,255,255,.5);
}

.ubermenu.ubermenu-horizontal.ubermenu-skin-white .ubermenu-item-level-0:hover>.ubermenu-target, 
.ubermenu.ubermenu-horizontal.ubermenu-skin-white .ubermenu-item-level-0.ubermenu-active>.ubermenu-target {
    background-color: transparent !important;
}

Please let us know if this works out for you.

#7

Thanks very much. Thats got it. The only problem is that the responsive menu is very different. How do I apply the same styles to the responsive menu?

#8

Hey Will,

For the responsive menu, you can add the following code too:

.ubermenu-skin-white.ubermenu-responsive-toggle,
.ubermenu-skin-white.ubermenu-responsive-toggle:hover {
    background: transparent !important;
    border: none !important;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.