Blurred Header

Johan Philip
(@johanvarghese)

4 years, 10 months ago

Hi!
Kadence is a great theme! I use it on all of my client websites, I saw a cool look on the apple website which blurs the header as seen in this screenshot

https://infernoshost.nothing-to-see-he.re/otO9Vq or on my personal website
https://infernoshost.nothing-to-see-he.re/Cvhuwn here.

I wanna do it for this website too, I have the code, and I applied it to the header and it works fine, I wanna know how I could do it for the sticky header

Thanks and Regards

Viewing 3 replies - 1 through 3 (of 3 total)

hannah

(@hannahritner)

4 years, 10 months ago

Hey,
Thanks for reaching out! Glad you’re enjoying Kadence! Can you post a link to your site?

Thanks,
Hannah

Thread Starter

Johan Philip

(@johanvarghese)

4 years, 10 months ago

https://nettiyadan.com

—
Regards
Johan

Ben Ritner – Kadence WP

(@britner)

4 years, 10 months ago

Hi,
You would need to use some css like this:

#masthead, #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container), #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
    background: rgba(255,255,255,.2);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Blurred Header’ is closed to new replies.