How to Create Blurry Transparent Sticky Header in WordPress with Elementor Pro

In this tutorial, I'll show you how to Create Blurry Transparent Sticky Header in WordPress with Elementor Pro.
✅Get Elementor Pro:
makedreamwebsi...
✅Get Domain & Webhosting(SAVE 50%):
makedreamwebsi...
✅Get code snippet for Blurry Sticky Header:
makedreamwebsi...
✅Get creative templates on my Template Shop:
templatish.com
Today, I’ll show you how you can make a sticky transparent header in Elementor Pro.
Here, first you need to install the Elementor and the Elementor Pro plugin on your website. Then, you can create custom header from the Theme builder. We create a header with menu, logo and a button. If you want, you can create your own custom layout inside the header. Here, we only display the Elementor transparent header only on our Homepage.
After that, we'll make the header transparent by using negative margin. Then, we make the header sticky by using the Elementor Motion Effect option. Lastly, to make the blurry header scrolling effect, we use some custom CSS code which you can get from my link above.
We can also customize the background color, blur and height of the sticky header from our code. I've shown you how to change that.
We also make our header responsive for mobile and tablet devices. Here, we create 2 different section - one for desktop and tablet and another for mobile. We have create a menu bar on mobile and link that with a popup. And inside this popup we place our mobile menu and button.
So, that’s how you can create a blurry transparent sticky header (on scroll) with Elementor in WordPress website.

[@Gãmïñg_wørld_902]

Amazing and very simple setup. Loved it. Love your tutorials man!

[@MakeDreamWebsite]

Thanks a ton!

[@Com-a-coeur]

Incredible! Many many thanks. All that I needed, and even more! I'll stay tuned...

[@MakeDreamWebsite]

Thank you too!

[@mexlemax3307]

Also great!
This is exactly what I've been looking for 2 days.
I had my page once on full width and height ausersehen made, then I could no longer see the header.
I make gelich immediately.
Thanks for this tutorial.

[@MakeDreamWebsite]

You're welcome!

[@stevenw2947]

Thank you, very helpful!!!

[@MakeDreamWebsite]

Welcome 😁

[@amirshrn8122]

ty bro , great tutorial

[@MakeDreamWebsite]

You're welcome

[@muhammadasyraf6438]

great video sir... but how to transparent blury with shrink header while scrolling...? is there any css editing?

[@chathurajayadinu]

Superb man ❤️💪

[@MakeDreamWebsite]

Thanks 🙏

[@sensei_893]

Hello, thanks it works. But i have a problem. When i create a new section on page, the menu loses the transparents -> but when i scroll one time the menu (Sticky Menu) becomes transparent again.. ?

[@luisguerreroultra]

Hi, I am struggling finding the code for the Costum CSS on you website. Please help me, so I can copy it an paste it.

[@MakeDreamWebsite]

You can get the link on the description...

Hi, how to add this blur efect to section beckround (same colour and transparency as in header scroll state ) ??? I can separate this code snippet from your code to work 😞! Thanks in advance ! And YES, thanks for your amazing tutorials !!!

[@MakeDreamWebsite]

Check this: ruclips.net/video/Q5RgSwfiSd8/видео.html

[@lefutur888]

Great video! very helpful.
I have a little problem however, I wonder if you know where it comes from. When I just start scrolling down, the whole page drops right under the header before coming back up as I scroll, the header being on top of the whole page at first. I looked into the settings of the header and of the block but could find anything that would work. Do you have any suggestion?

[@MakeDreamWebsite]

Can you share your page link so I can figure out the issue..

[@algorithme-xd9in]

Can you show us how to build the page home from scratch?

[@MakeDreamWebsite]

I haven't built this page from scratch. I imported it from "Starter Templates" plugin and then edit some content. But, if you want to learn how to build a website/page from scratch, there is another full length 3 hour tutorial on my channel. You can check this.

[@adied7725]

Hi I have already made a transparent custom header in elementor, on hover it darkens... I would like that the header not show on scroll down, but only show when user tries to scroll back up.... But I also need a way of now showing a dark background or lighter background to header on scroll back up with blur as the header I have made only reacts on hover as mentioned... Hope you can help... Ps great tutorials 😊thanks any input welcome

[@MakeDreamWebsite]

I got your point. But, for this functionality you need to add custom JavaScript code. You can't do that by following this approach.

[@adied7725]

hi thanks for the reply, appreciate your time, do you know the java script needed , please?

[@queenbeemeditation]

I created with the same technique shown, however, I have an issue, Header and footer work fine on inner pages but the front page is not displaying correctly on live view. But when we go to edit with Elementor the display is correct. Please help

[@MakeDreamWebsite]

You can email me your page link

[@queenbeemeditation]

@@MakeDreamWebsite please share your mail id