Tagged: mega menu, transparency, transparent
Hi there, I have my first real need to use the Mega Menu.
When I hover on it, it covers most of my ‘featured’ image on the top of the page and would like the menu semi-transparent.
I don’t need to change the colours or anything, just to put a 25% or 75% etc transparency on the menu background (which is currently white).
Is there a quick CSS code I can enter (so if I do change my menu colours, the transparency will remain valid) ?
I have tried all the examples in previous topics but none of them work. Maybe they don’t work in version 3.5 ?
Many thanks,
H
and this is only for mega menu – the rest dropdown menus you don’t need to adopt?
try this first:
.header_color .avia_mega_div {
background-color: rgba(255, 255, 255, 0.85) !important;
}
.avia_mega_div .sub-menu, .header_color .main_menu ul .avia_mega_div ul {
background-color: transparent !important;
}
i think anything under 0.8 opacitiy makes it diffuse
next step is that the list points got its own background-color (and hover state)
so here seems to be the complete rule:
.header_color .avia_mega_div {
background-color: rgba(255, 255, 255, 0.85) !important;
}
.avia_mega_div .sub-menu,
.header_color .main_menu ul .avia_mega_div ul,
.header_color .main_menu .menu .avia_mega_div ul li a {
background-color: transparent;
}
but this only rules the mega-div !!! if you want the whole dropdown menus we must do something different !
Hey @Guenni007, thank you so much for the quick response. This worked perfectly!