How to create frosted glass background effect on mega menu?

Site URL: https://atmos.art

Hi,

I purchased a mega menu plugin from Square Refresh and I’m struggling to edit the code to create a certain effect.

I am essentially trying to recreate the effect in the image from this post but for all mega menu backgrounds. I want the background to essentially be transparent but blurred so it barely reveals what is left underneath the mega menu on each page.

This is the code provided by Square Refresh for editing the background colour and opacity. Unfortunately, no matter what I do the mega menu itself won’t change from black. Editing the settings in the code below seems to affect the space outside of the mega menu dropdown container instead.

div#mm-container:before {
  background-color: COLOR;
  opacity: 0; // from 0 to 1
}

Hopefully this makes sense as I’m not sure if I am explaining it properly.

Hope someone knows how to do this.

9 hours ago, tuanphan said:

You can use this code to Website Tools > Custom CSS

[data-section-id="66f84ba91ad4034b4f1c07bd"] .section-border, [data-section-id="66f84ba91ad4034b4f1c07bd"] .section-background {
    background: rgba(0,0,0,.4) !important;
    box-shadow: 0px 5px 15px rgba(100,100,100,0.3) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

This worked great! Thank you so much for your help. Wasn't sure I was going to be able to get around this one. Is there a way I can apply this effect to the main navigation bar on hover too so it all looks more uniform?

On 10/10/2024 at 1:42 AM, atmos said:

This worked great! Thank you so much for your help. Wasn't sure I was going to be able to get around this one. Is there a way I can apply this effect to the main navigation bar on hover too so it all looks more uniform?

You can use this code under

header#header {
    background-color: transparent !important;
}
.mm-item {
    padding-top: 0px !important;
}
.mm-item .content-wrapper {
    padding-top: 150px !important;
}

11 hours ago, tuanphan said:

You can use this code under

header#header {
    background-color: transparent !important;
}
.mm-item {
    padding-top: 0px !important;
}
.mm-item .content-wrapper {
    padding-top: 150px !important;
}

Thank you that worked great too. Is there a way to stop the background beneath/underneath going darker when the mega menu is open?

25 minutes ago, atmos said:

Thank you that worked great too. Is there a way to stop the background beneath/underneath going darker when the mega menu is open?

Which background are you referring to?

11 minutes ago, tuanphan said:

Which background are you referring to?

I think it’s more correct to say overlay. It’s the parts underneath the mega menu when it is open. It darkens the areas beneath the mega menu. I’d like to keep the brightness of the pages the same when the mega menu is opened. Underneath the mega menu, it should look more like the other screenshot attached

You can use this CSS under

#mm-container:before {
    opacity: 0;
}

4 hours ago, tuanphan said:

You can use this CSS under

#mm-container:before {
    opacity: 0;
}

 

Thank you that worked!