Blur content below fixed Navbar, Safari style?

Design help General
1

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?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

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

3

Hi @cyberdave , not exactly, I’d like to apply a backdrop blur on the navbar, so whatever is scrolled beneath it is blurred

Like that

1qBtE

1 Like
4

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 the custom css runs, the content passing under the nav will be set to blur

3 Likes
5

Thanks a lot @cyberdave ! At least it is achieved in Safari :slight_smile:

P.S I gave my nav a style called “Nabvar” with capital n, and when capital N in the code it didn’t work, only worked with small n. Weird

6

Hi @radmitry, well that backdrop-filter is only working in Safari at the moment, but on other browsers should just render the text normally.

On the Navbar class, all classes that are rendered on the published site are rendered in lower case, so that is why the custom code has the lower case “n”.

2 Likes
7

Good to know , never new about the lower case. Thanks a lot

1 Like
8

I think one of the most reasons of buying Apple Stuff is because of that blurry Bar :thinking: