Need to Create a Blurry Sticky Header? A Step-by-Step Guide How to Do That Using Elementor Pro and Custom CSS

Hey guys! Have you ever tried to create blurry sticky headers? No need to call in for pros! My simple guide below will help you get over that hump. At the end of the day, you’ll be able to create a blurry sticky header, just like the one on Apple.com with Elementor Pro and Custom CSS.

If you are searching for Elementor designs, just have a look at Elementor Marketplace by TemplateMonster.

So, let’s get the ball rolling.

Create Your First Sticky Header with Elementor Pro Tutorial Below

Step #1: Go to the dashboard to create your header.

Step #2: Click on Templates -> Theme Builder -> Add New. Now, pick your template type (Header in this case) and name it. Finally, click on Create Template to confirm the creation.

Step #3: Select your structure preference. Let’s pick the second option, the one with two rectangles.

Step #4: Time to edit the layout. Here you can adjust the content width, column gap, height, and minimum height, as in the picture below. 

Step #5: Let’ move on and create a new section for the header. Here you can also add the background. But there’s a trick. I strongly recommend you to do with the background overlay instead of a background tab. Why? Well, you’ll get the power to control the opacity of your header with the corresponding slider. As a result, you just pick the color and customize its transparency as per your liking. 

Then you can continue with all the other stuff you need like logos, menus, and the like.

Step #6: Now we’ve come to the blur. To begin, make sure that the main section is selected.

Step #7: Click on the Advanced tab and go to Custom CSS.

Step #8: Now, it’s time to add a super simple line of code. Fret not, it’s really not rocket science. 

Well, it looks like this:

{ backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }

You just need to copy and paste it in your own header. What it actually means? Glad you asked. I’ll try.

First, I type selector to target my section. Second, to add a blur to the page under the header, I need to specify a backdrop-filter property. It’s a good thing that creates this cool effect, yet, there’s a trick. Just because some browsers like Internet Explorer, Firefox, and Opera Mini don’t support it, there might be some inconveniences for your users. Nothing bad will happen – they won’t enjoy the blur. That’s it. The good news is that the major browsers like Chrome and Safari support this effect.  

Let’s get down to blur. I type blur and add how much blur I want. And the value next to blur (20px) is what I mean. As for me, the value of 20 looks quite moderate but still noticeable. You can play around this value as per your liking. The webkit prefix comes as a necessity for some browsers. Without this line, they aren’t able to recognize the property.

Step #9: To poke around stick functionality, go to Motion Effects -> Sticky -> Top 

Step #10: To make sure your header shines above all the other elements on the page, go to Z-index and set the highest value.

Step #11: To assign your header to a certain location on the site, use the Publish Settings feature.

Step #12: I want the header to be above the top section on the page. That means that the section needs to move under the header. To make this happen, just add some negative margin. Let’s try. So, I scroll down, and the header blurs the page underneath. Bingo!

Step #13: Don’t limit yourself with the backdrop filter property. Poke around its values. A bit of exploring never hurts.

Final Words

That’s it. Now you know how to create blurry sticky headers with Elementor Pro and Custom CSS. From now on, feel the freedom to experiment with settings and values to see how far you can go. It’s not a secret that users favor sticky navigation in general, so why not use it to its fullest potential? 

Looking for a how-to-guide on how to create portfolio Elementor themes, or seek for the best WooCommerce templates? Don’t be afraid to do a bit of exploring. Anyway, I hope my guide was helpful enough for you. Got any questions? Shy not to ask.