Blur sticky header

Hello. Please how can i do Blur sticky header?

How CSS code?

Thank you very much.

Hello,

Please try to use the below code, enter it into the “Desktop CSS” area in Theme Settings -> Custom CSS.

.whb-sticked .whb-row {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
}

Feel free to reach out to me anytime when you have anything more to say.

Kind Regards

Hello. Thank but ist not a BLUR.

I need Black Opacity and BLUR

Thank you very much.

Hello,

In this case, try the below one.

body .whb-sticked .whb-row {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(7px);
}

https://monosnap.com/file/cL7pCWnv1JFlBTVZJFj1GwZNwAbJhm

Kind Regards

Hello.

Please.

Blur not work.

Hello,

Could you please update the access? Because seems that the last one is incorrect.

https://monosnap.com/file/APAjCCsFbabYg4Fmcw6Nnk0evUO7s5

I await your response.

Kind Regards

Yes. Try please.

Hello,

Sorry but I still cannot access the admin panel, here is a screenshot:

https://prnt.sc/4o5v0i5feRZW

May I request you check the access on your side?

I await your response.

Kind Regards

Hm. Try now please.

Hello,

I see that the “Blur” is working well right now, here is a screenshot: https://prnt.sc/_ayxNFRFrqkA

Let me know if you have any questions, I’d be happy to answer them.

Kind Regards

I dont know why. But for me not working.

I send image.

Attachments:

You must be logged in to view attached files.

Hello,

I am using the Chrome browser and there this feature is supported. So most likely you use a browser that doesn’t support such a feature via the above CSS.

In the meantime, feel free to ask me any questions you may have.

Kind Regards

I try FireFox and Safari and not workin

And on page https://www.apple.com/
it workin in FireFox too. Why? 🙂

Please

Please, you can answer me, why Apple Blur effect work on every browser?

[Luke Nielsen]

Hello,

Please add the below code into the same area in Theme Settings -> Custom CSS. Then recheck the issue.

body .whb-sticked .whb-main-header {
    transform: unset;
}

Thanks for your time and have a great day.

Kind Regards

• This reply was modified 1 year, 8 months ago by Luke Nielsen.

Yes cool.

Its work 🙂

Thank you very much 🙂

You are welcome! Don’t hesitate to reach out if you have any more questions. We’re thankful that you took the time to share your concerns with us.

Have a good day!

Kind Regards

[Author]

Posts