How to make header blurred / frosted effect?

How can we make the black header bar that appears with "SCROLL BACK" or "STANDARD STICKY HEADER"
Be 50% opacity and blurred ?

If you have the header color set to solid you can change the color, opacity, and blur effect.

5 minutes ago, Ziggy said:

If you have the header color set to solid you can change the color, opacity, and blur effect.

Hello,
The header background is transparent, however we use this feature :
Which fades in a black background to the header after the first section.
How do we edit this black background with or without code?
Check biobuilds.com for an example

You can try this Custom CSS:

[data-header-style="dynamic"].header {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

29 minutes ago, Ziggy said:

You can try this Custom CSS:

[data-header-style="dynamic"].header {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

 

Thanks, that is great, however now the bar is always blurry (including on the hero which looks weird), is there a way to make it so only when the background fades in the blur fades in as well?

Add this additionally:

body.tweak-transparent-header .header:not(.shrink):not(.transparent-header-theme--override) {
    backdrop-filter: blur(0px) !important;
}

2 minutes ago, Ziggy said:

Add this additionally:

body.tweak-transparent-header .header:not(.shrink):not(.transparent-header-theme--override) {
    backdrop-filter: blur(0px) !important;
}

 

Wow, thank you so much!
Finally, the last issue I see is that on mobile it seems like the menu doesn't appear anymore after adding the code, any idea why?