Mega menu transparency

[micheal_w]

Hi Guys,

I use the code below (from you) to make the sticky menu transparent.

.is-sticky .sticky-header {
background-color: rgba(255,255,255,0.95) !important;
}

However when the header is transparent, the mega menu itself doesn’t and it looks a bit funny… Is it possible to make the background of the mega menu transparent?

ps. you need to login as the site has an active maintenance mode.

Thanks!

[David Martin – Support]

Hi,

Please use this:

.resized-header nav .menu ul.sub-menu, .resized-header li.menu-item.sf-mega-menu > ul.sub-menu > div, .resized-header nav .menu ul.sub-menu, .resized-header li.menu-item.sf-mega-menu > ul.sub-menu > div {
    background-color: rgba(255,255,255,0.95) !important;
}

Thanks.

[micheal_w]

Unfortunately the mega menu dropdown still not transparent 🙁

[David Martin – Support]

Hi,

For full transparency you need to adjust the color code above, to this: background-color: rgba(255,255,255,0) !important; Previously it had a 95% solid fill, change it to 0 will make it without any fill color. I have done this on your site.

Thanks.

[micheal_w]

Hi David,

I don’t need full transparency, but there is still some glitches…

a) when we start scrolling (but the header is still the same height) it becomes transparent, but the dropdown doesn’t (See pic #1)

b) when the sticky header is active, the background of the dropdown is transparent (thanks!), but the submenu themselves have their own background for some reason – and they are not transparent (See pic #2)

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Change David’s css to:

.resized-header nav .menu .sf-mega-menu > ul.sub-menu, .resized-header li.menu-item.sf-mega-menu > ul.sub-menu > div, .resized-header nav .menu .sf-mega-menu > ul.sub-menu, .resized-header li.menu-item.sf-mega-menu > ul.sub-menu > div {
    background-color: rgba(255,255,255,0.80) !important;
}
.resized-header nav .menu .sf-mega-menu > ul.sub-menu .sub-menu {
    background: transparent;
}

– Kyle

[micheal_w]

Hi Kyle,

It is now perfect when the header is resized (after scrolling), but there is interval when we scroll down but the header still doesn’t get resized and in this case the dropdown mega menu is not transparent (although the header is).

[David Martin – Support]

@micheal_w – can you screenshot this? I am having trouble replicating. Is it just when you scroll down slightly and pause?

Thanks.

[Kyle – SUPPORT]

Ok change it to:

nav .menu .sf-mega-menu > ul.sub-menu, li.menu-item.sf-mega-menu > ul.sub-menu > div, nav .menu .sf-mega-menu > ul.sub-menu, li.menu-item.sf-mega-menu > ul.sub-menu > div {
    background-color: rgba(255,255,255,0.80) !important;
}
nav .menu .sf-mega-menu > ul.sub-menu .sub-menu {
    background: transparent;
}

– Kyle

[micheal_w]

It works, you’re the King, thank you 🙂

[Kyle – SUPPORT]

No problem 🙂