Transparent dropdown menue

Support
#1

Hello there, for some reason I cannot upload a screen shot, but if you go on the homepage of my web site you can see it. www.boundlessroads.com

So basically, you can see that the header and menu are grey transparent with opacity, but if click on the drop down menu (eg destinations) , it is just transparent without the opacity.
Is it possible to make the drop down menu with opacity just like the main menu?

thanks a lot for your help
best regards
isabella

#2

Hi @isa1978,

Thanks for writing in.

Little confuse of what you want to achieve. However you could try this.

To adjust the submenu hover effect, add this in your custom CSS:

.desktop .sub-menu a:hover{
    background-color: rgba(0, 0, 0, 0.31);
}

.desktop .sub-menu a:active{
    background-color: rgba(0, 0, 0, 0.31);
}

Let us know how it goes.

Hope it helps.

Thanks. :slight_smile:

#3

Hello nico,
that was fine. I like it on the hoover. But I would like to have it also in the drop down menu, the same effect as in the main menu. If you look at it, you see that in the menu is not totally transparent, it is a transparent grey (opacity) i need it also in the drop down menu.
I am not sure if this is more clear. I don’t know why I cannot upload the screen shot here to show you…

thanks a lot for your help
best
Isabella

#4

Hi Isabella,

Please try this code:

.masthead-stacked .x-navbar .desktop .sub-menu {
    background: rgba(255,255,255, 0.5);
}

Hope this helps.

1 Like
#5

Hello there! thanks a lot for your help but it doesn’t work. nothing changes :frowning:

#6

Hi,

You can try this code instead.

body .masthead-stacked .x-navbar .desktop .sub-menu {
    background: rgba(255,255,255, 0.5) !important;
}
#7

YESSSSS!!!
thanks much :heart_eyes:

#8

You are most welcome. :slight_smile: