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

mnhalrj · November 10, 2023, 10:14am

Hi
I am trying to achieve transparent header that turn sticky and its background to blurry transparent when scrolling like the one on this site

Thanks in advanced

Allucinante · November 10, 2023, 10:51am

The site’s CSS is most revealing:

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

mnhalrj · November 10, 2023, 11:00am

Thanks @Allucinante
I did try that but the thing is i shifted my header bottom margin -91 to make it transparent because i had no choice to make it transparent even when i turn the color of the container background to transparent the background show white background color

alexven · April 9, 2024, 7:25pm

@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/

timmse · April 11, 2024, 12:22pm

Hey @alexven,
You must enable the sticky header toggle (and eventually sticky on scroll), so that the scrolling classes are automatically added to your header.

However, you should still use this style (add it to Bricks » Settings » Custom code » CSS) so that the effect is applied to the entire header and not just the container inside (unless that is desired).

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