Blur menu bar

Hi there,

I'm not seeing the effect you are referring to here:
https://www.screencast.com/t/pxqTioj6uO

Am I missing something?

Hello when you scroll on the page in question the elements are blurred when passing the menu bar

Thanks

I think we can do it with CSS.

Can you link me to your site in question with the sticky navigation activated?

Oh good ! Here is the site in question : https://www.mmgraphik.com/

Try this CSS:

.sticky-enabled .main-navigation.is_stuck {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,0.72);
}

Great it seems to work! On the other hand, why is the "backdrop-filter" in red in the css personalizer ?

Thanks

I think it's a relatively new CSS property so the editor probably doesn't recognize it yet.

Oh ok ! Perfect thank you very much !

Out of curiosity, can this kind of blur effect be attributed to an image fo example ?

An article like this might help:
https://css-tricks.com/almanac/properties/b/backdrop-filter/

Thanks ! I'll watch this! To adjust the transparency of the bar is it in there? : background-color: rgba (255,255,255,0.72);
}

Yes :)

Great thanks, it works perfectly ! 😃

No problem :)

Hello I am getting back to you because I noticed that on mobile the blur effect in the menu bar does not apply, how could I remedy this ?

Thanks