In this tutorial, we will create a sticky header with Elementor that hides when scrolling down and reappears when scrolling back up.

What You Will Need for This Tutorial

First, this is super easy if you follow along step by step. Even though we will be using Javascript and CSS, you don’t really need to know how to code. All you need to do is copy and paste what I show you.

We will need Elementor Pro to do this. In all reality, we need Elementor Pro to do anything, really. The free version is just not enough and should be used to test El. Suppose you want to unlock the real power of Elementor and save yourself countless hours trying to find workarounds that end in headaches. In that case, you gotta get the Pro version.

Get Elementor Pro Free Alternative.

Okay, let’s have some fun and dive into Elementor! And so as not to get stocked, below a video tutorial to guide you through.

Adjust the Javascript and CSS

There are only two parts you will need to adjust to make it work right for your website.

The Javascript:

<!-- Hide and Show Desktop Header -->
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("header-hide").style.top = "0";
  } else {
    document.getElementById("header-hide").style.top = "-100px"; /* adjust this value to the height of your header */
  }
  prevScrollpos = currentScrollPos;
}
</script>

Where you see .style.top = “-100px”; In this part, you would only need to adjust the 100px to match the height of your header. If part of your header still shows when you’re scrolling down, then make the value higher until your header is entirely off-screen.

The CSS:

<style>
/* Show Hide Sticky Header Speed Control */
#header-hide {
	transition: all .4s ease!important;
}
</style>

Where you see transition: all .4s ease!important; this controls the speed of the header going up and down. The .4s is .4 seconds. So, for example, if you set this to 1s, then it will take a full second to go up and down. You can adjust this to have the correct animation speed for your header.