Beautify your nav bar with a blurry background | Tutorial

Community resources Show & Tell
1

I’ve put together a short tutorial on how to create the blur effect to elements scrolled behind the navigation bar.
This is relatively easy to implement and adds a nice and unique touch to a site.

6 Likes
2

Thanks for posting this!

1 Like
3

I just tried this as it seemed like a possible contender for my scrappy website, but in the embed I get this:
image

and erm… . the blur’s not working… :thinking:

4

If you can share the read-only link to your website I will be able to have a look and help you out :slight_smile:

5

https://preview.webflow.com/preview/nocodetoknowcode?utm_medium=preview_link&utm_source=designer&utm_content=nocodetoknowcode&preview=a9c7abd338749fc30e91bbf2180988af&pageId=5e8363e721df55377a9a88a4&mode=preview

:grin:

6

You can change the class name Header to nav as the custom code looks for this class name.
This should do the trick.

Screen Shot 2020-03-31 at 2.11.30 PM

1 Like
7

Thanks for this awesome tip. Going to use this in a project I’m working on!

1 Like