Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.
This tutorial will let you create a blur filter effect to any element placed behind the desired section. In our case this will be for anything scrolled behind the navigation bar.
To get started, insert a section. Give it a class name - nav
Give the section a desired height and 100% width. Set display to Flex and Center align elements.
Set Position to Sticky and set top to 0px. Set a high z-index so it's always on top of other elements.
Give this layer the desired color and set some transparency. In our case, it is set to white with 75% transparency.
Place a div inside of the nav, this div will be the parent for the nav links. design it as you like.
Alongside the new div we just placed, add an Embed component from the element panel.
Open the HTML Embed and paste in the following code.
Click Save & Close.
You're all done!
Now any element scrolled behind the nav will be blurred.
I hope this helps you create beautiful websites :)