How do I edit the header bar to be blurry?

[Peter789]

Hello there,

What I need to do to make the Header Bar blurry like Apple’s website?
Here’s an example: https://prnt.sc/tkc6r0

Can you please explain it to me step by step what code I need to add? I am new to this please

[prakash_s]

Hello Katarina,
Thanks for writing to us.
Please have look at our header documentation about how to set header and customize the header bar. https://theme.co/docs/header.
If you need any help after reading through our documentation feel free to reach out at any time.
Thanks

[Peter789]

Hello!

Thanks for the reply,

I have read everything, and It doesn’t really help me out.

What code I need to put to make the bar blurry and where I need to click to set it up?

[rad]

Hi Katarina,

Sorry for the confusion, but it’s not currently possible with the existing background options. But, you can try this

First, please set a background color to your header bar, like on this screenshot

Second, please add this CSS to header bar’s Element CSS.

$el.x-bar {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

Please note that blurred backgrounds using CSS as above is non-standard in which other browsers may not work with. The CSS itself is from Apple’s site and we don’t maintain and provide support for that CSS.

Thanks!

[Peter789]

Hello Rad,

It works! Thank you so much!

You are the best!

[ruenel]

You’re welcome Katarina!
We’re glad were able to help you out.

[Peter789]

Hello there!

The code works, but there’s an issue on mobile devices when I scroll up & down fast it cuts out the header and sometimes the header disappears.

[friech]

Hi Katarina,

In that case, please provide us login credentials in a secure note so we can take a closer look.

Thanks,