How do I edit the header bar to be blurry?

Hello there,

What I need to do to make the Header Bar blurry like Apple’s website?
Here’s an example:

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

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


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?

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.


1 Like

Hello Rad,

It works! Thank you so much!

You are the best!

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

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.

Hi Katarina,

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


This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.