Elementor Pro Transparent Header On Scroll

Elementor pro transparent header on scroll: the Ultimate tutorial. hello I’m your host Kaycinho, I’m the Digital Alchemist, and today, we’re going to build a modern and slick navigation, with Elementor Pro only, and with the following features:

• transparent header
• shrink the logo on scroll
• hide the header on scroll down
• reveal the header on scroll up
• hybrid navigation with a fullscreen navigation
• semi-transparent blurred background in the fullscreen navigation

Elementor Pro transparent header on scroll: Pre-requisites

In order to complete this tutorial, apart from of course WordPress and a WordPress theme (the free version of the Astra theme would do), you will need:

• Elementor Pro

Get Elementor Pro

Elementor Pro transparent header on scroll: the steps

This page would never end if we had to break down all the details, so I did better, and created a full length video tutorial which you can find at the top of this page. But in case you need a reference, here it is:

• 0:15 – What we’re going to build
• 1:35 – Project Pre-requisites
• 2:43 – Creating the wp menu
• 3:34 – Creating the home page
• 4:04 – Creating the fullscreen navigation
• 7:53 – Creating the header
• 22:12 – Adding the shrink logo feature
• 27.36 – Adding the “hide on scroll down” feature
• 28:58 – Adding the blurry background fullscreen nav feature

Elementor Pro transparent header on scroll: Code

1. Transparent header + Logo shrink

From the original blog post of Ignite Web Design (direct link here).

/* Background color on sticky */
.elementor-sticky--effects {
background-color:rgba(0,0,0,0.70);
transition: all 0.5s ease;
}

/* Set initial logo size */
.my-logo img {
max-height: 50px!important;
width: auto!important;
transition: all 0.5s ease;
}

/* Set sticky logo size */
.elementor-sticky--effects .my-logo img {
max-height: 40px!important;
width: auto!important;
}

2. Hide header on scroll

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-200px";
  }
  prevScrollpos = currentScrollPos;
}</script>

3. Blurring the fullscreen navigation

selector {backdrop-filter: blur(5px);}

Elementor Pro transparent header on scroll: your turn!

So, I hope that you enjoyed this tutorial and can’t wait to see the slick and modern navigation you’re going to create with Elementor Pro! Question of the day: what’s your favorite type of navigation? Please let me know in the comments! If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help me tremendously, and it doesn’t cost you anything! Also, if you know someone that could benefit from it, please share it now. Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here. So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!