The backdrop-filter effect is a CSS property that applies visual effects like blur to the background behind an element.
It's pretty common to see this effect on the header when the menu is sticky.
Scroll down and check the menu above ⬆️
Backdrop on the Menu Only
It's pretty straightforward. We just need to add one CSS property to the Menu Builder element.
(Don't forget to add some transparency to your background color.)
backdrop-filter: blur(10px);
}
Backdrop on the Menu and the Dropdowns
Here's the tricky part: the dropdowns are part of the menu, so when we add the backdrop-filter to the menu, it creates a new stacking context. This prevents the backdrop-filter on child elements from working properly because it can only blur elements within its own stacking context.
But there's always a way—by adding a pseudo-element to the menu.
Add this custom CSS to the Menu Builder element, and both the menu and the dropdown will have a working backdrop-filter effect.
position:relative;
}
%%SELECTOR%%::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
pointer-events: none;
z-index: -1;
}
%%SELECTOR%% .breakdance-dropdown-floater {
backdrop-filter: blur(20px);
}
/* backdrop-filter in mobile mode */
%%SELECTOR%% .breakdance-menu--dropdown-accordion .breakdance-menu-list::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(10px);
background-color: rgba(255, 255, 255, 0.05);
pointer-events: none;
z-index: -1;
}
Apply a semi-transparent background color to the Dropdowns to ensure the blur remains while keeping the links readable.
