Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #602027

    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,


    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)



    Please refer to @guenni007‘s post.
    @guenni007 Danke schoen! :)



    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!



    Glad to hear it worked!

    Also thanks @guenni007 for helping out :)


Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.