Transparent header that turn sticky and its background to blurry transparent when scrolling

How To
4

@Allucinante
Could you ellaborate?

My header ID is different: #brxe-egjvnz So I adjusted your code suggestion accordingly:

#brxe-egjvnz.scrolling {
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(10px);
}

Where do I need to put the code? I tried the main custom code section in the bricks settings as well as the section’s css in the header template. But the code somehow does not work for me.

My ID #brxe-egjvnz is correct, since I used it for placing the z-index for the header, too.

This is the link to the dev-page BTW: https://b2cf1eyoj4.myrdbx.io/