Frosted Glass Navigation

Hi Everybody :raising_hand_man:t3:

I recently came across Webflows frosted glass navigation and thought I’d take a crack at trying to recreate it myself for a new project.

So far, I’ve managed to pull in the filters. However, for some reason they seem to be affecting the nested items rather than just the navigations background.

Please would someone be able to point out where I’m going wrong with what I’ve created so far.


Here is my site Read-Only: LINK

I think this is what you’re looking for:
https://blur-behind-nav.webflow.io/

2 Likes

Hey @Jordan.kellett ,

Me again. The blur filter blurs the element and its children, whereas the backdrop-filter css rule blur’s the content behind the element. This CSS rule isn’t native to Webflow so you have to put it in yourself, and also be aware it doesn’t have compatibility across all browsers and devices, hopefully one day. The effect likely won’t show on Mozilla Firefox, although backdrop-filter can be enabled, but it needs to be enabled in the users browser, and its default value is false.


It is the same case for the Opera browser; needs to be enabled. No support for Internet Explorer.

Best practice is to include the standard rule and the -webkit- rule. You can copy the script here:

<style>
.navigation{
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
</style>

-webkit- is used by Chrome and Safari as a html/css rendering engine.

I made a screen recording showing implementation but neglected to put the -webkit- line in.

https://www.loom.com/share/b986a9d8de8b438fa45a4464dd1e21df

Best!
AC

Also always worth looking at the Mozilla documentation.

Hi Andrew,

Thanks for your help once again!

1 Like

No worries @Jordan.kellett !