How to create a frosted glass effect on Dawn 1.0 theme header?

Store Design
1

Hello, I’m trying to make my header not only have its current translucent opacity, but also have it blur content behind it, similar to apple.com.

I’ve played with the base.css file ad added the below code, but it doesn’t have an effect.

sticky-header.header-wrapper, .color-background-1.gradient.header-wrapper–border-bottom {
position: fixed !important;
top: 0px !important;
left: 0px !important;
width: 100% !important;
opacity: 0.8 !important;
backdrop-filter: blur(8px) !important;
}

My site is www.markpomerantz.com. Thank you!

1 Like
2

@JW1000

yes, please try this code

https://codepen.io/ariona/pen/xxdOaM

3

Thank you. Not quite sure how/where to apply this CSS to just my Nav on my site. How would I do that?

4

Looking further at this code, I don’t think this is the right solution for my Nav — it looks like this is importing both a normal image, as well as a blurred version of the same image, and then saying that anytime the box is over the image, to show the blurred one instead.

I just need the CSS that will make anything that’s underneath my Nav show as blurred.

5

Hi LW1000,

i have the same issue. I have seen that you’ve figured it out.

Could you please help me with blurring my header?

Thanks

6

@JW1000 add below css into base.css file

sticky-header.header-wrapper, .color-background-1.gradient.header-wrapper--border-bottom {
    backdrop-filter: blur(48px) !important;
    background-color: rgba(255, 255, 255, .15)!important;
}

Ujjaval_0-1681209575961.png
Ujjaval_0-1681209575961.png1581×791 84 KB

2 Likes
7

any clue how we do this for a mobile menu/the drawer that opens up?