Darken site behind megamenu (globo)

[KirstyCC]

Hi - is there away to darken the site behind the mega menu to make it stand out more?

[Mikkynat]

Hi, yes, you can definitely make the background behind your mega menu darker so it stands out more.

It usually just needs a small JS & CSS tweak that adds a semi-transparent overlay automatically when the menu opens. The exact code depends on how your theme structures the menu container.

If you’re comfortable editing theme code, I can point you to where to add it.
If not, I can quickly handle it for you so the menu has that nice dimmed background effect.

[tim_1]

Try the following:
Go to Customize=> Footer Group.
Add section “Custom liquid” / “Custom code”.
Paste this code:

<style>
  .section-header:after {
    content:"";
    opacity:0;
    transition: all 0.3s ease-in-out;
  }
  .section-header:has(.list-menu > .gm-active):after {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.25);
    z-index: -1;
    backdrop-filter: blur(3px);
    opacity:1;
  }
</style>

Why this way – editing theme code will make future theme update difficult.
This could go to “Theme settings”=> “Custom CSS”, but unfortunately, Shopify does not accept rules using content:""; there.

Code is tested against Globo megamenu demo store and may need fine-tuning for your store – share a link if does not work.

=>

[KirstyCC]

Hi - This is exactly what I’m after! But the code doesn’t seem to be working - Am I putting the code in the right place? I’m relatively new to Shopify btw!

[tim_1]

Not quite:

1. Go to Customize=> Footer Group.
2. Add new section “Custom liquid”, do not use “Custom CSS” setting in Footer section.

Yes, can be confusing.

Also, looks like it already has some kind of overlay? Adding another one would make it too dark…

[KirstyCC]

Thanks Tim_1 but I’m still struggling - talk to me as if I’m a complete beginner coding wise!

Is this where I’m ment to put the code? Not sure how you add a section - I tried coping it straight in but it didn’t work

[tim_1]

No theme code editing:
Go to “Online store”=> Customize (next to your theme).
Then:

1. On any page in Customizer
2. Go to a Footer section group and click “Add section”;
3. In a modal select “Custom liquid”;
4. New “Custom liquid” section is added to Footer;
5. Paste the code to the “Liquid code” setting of this new section.

[AiTrillion]

Hello @KirstyCC ,

I hope you are well!

Can you please provide me the store URL? It will be helpful for me to provide you the CSS which will darken the site behind mega menu.

[KirstyCC]

Brilliant - thank you!!