Broadcast Theme - When mega menu is open - blur the website

Store Design
,

Topic summary

A user sought help to add a blur effect to their website content when the mega menu is open. Currently, the menu blends into the page content, making it difficult to distinguish.

Desired outcome:

  • Blur the background website content when mega menu is active
  • Improve visual separation between menu and page content

Solution provided:
A CSS code snippet was shared to add to the theme’s Custom CSS section:

  • Uses backdrop-filter: blur(15px) to create the blur effect
  • Applies a semi-transparent white overlay when mega menu is visible
  • Targets the .container element when .meganav--visible class is present

Status: Resolved. The user confirmed the solution worked successfully.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

How can i blur the rest of my website when my mega menu is open

At the moment - the menu gets lots within the website like this

TBS2023_0-1742278589142.png
TBS2023_0-1742278589142.png1865×889 115 KB

and i would like it like this

TBS2023_1-1742278635009.png
TBS2023_1-1742278635009.png1510×830 80.7 KB

Thanks

www.thebodyshop.ca

datsau

2

Hi @TBS2023

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

.container:has(.meganav--visible):after {
    content: '';
    background: #ffffff78;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    backdrop-filter: blur(15px);
    opacity: 9;
}
1 Like
3

AMAZING - thanks

1 Like
4

You are most welcome!