Hey guys! Always wanted to make the fixed navbar blur any background that is scrolled behind it like it is done in Safari’s top bar, Somewhat as if I have applied a blur effect on the content, but only in the navbar area. Never could achieve this… any ideas? I guess what I need is blur overlay? …

Hi @radmitry , thanks, well this is not built in as a native property but you can add a little custom code (but will only work on safari browser) Target the navbar class like this: <style> .navbar { -webkit-backdrop-filter: blur(5px); } </style> Publish the site and on the published site where t…

Blur content below fixed Navbar, Safari style?

Design help General

cyberdave (Dave S.) April 18, 2018, 6:53pm 2

Hi @radmitry, I am not entirely sure which effect you mean, do you mean like this? https://webflow.com/website/High-Sierra-Nav-Effect

Topic		Replies	Views
macOS High Sierra site Navbar effect General	12	1822	April 12, 2018
Backdrop filter blur Custom code	14	7201	November 18, 2021
Navbar disappears on scroll, backdrop blur doesn't work on Chrome Custom code	4	2353	July 9, 2021
Beautify your nav bar with a blurry background \| Tutorial Show & Tell	6	8578	April 6, 2020
Blur overlay for part of image General	6	2956	December 7, 2019

Blur content below fixed Navbar, Safari style?

Related topics