[Resolved] Blur menu bar

[Matthieu]

Hello, do you think that it is possible to obtain a blurred menu bar effect like on the site: https://www.apple.com/iphone-12/?

Thanks! 😁

[Leo]

Hi there,

I’m not seeing the effect you are referring to here:

Am I missing something?

[Matthieu]

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

Thanks

[Leo]

I think we can do it with CSS.

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

[Matthieu]

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

[Leo]

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);
}

[Matthieu]

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

Thanks

[Leo]

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

[Matthieu]

Oh ok ! Perfect thank you very much !

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

[Leo]

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

[Matthieu]

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

[Leo]

Yes 🙂

[Matthieu]

Great thanks, it works perfectly ! 😃

[Leo]

No problem 🙂

[Matthieu]

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

[Author]

Posts