Streaming live at 10am (PST)

Beautify your nav bar with a blurry background | Tutorial

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

Thanks for posting this!

1 Like

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:

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:

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

:grin:

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

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

1 Like