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.


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:

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:


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