Hide Sticky Header On Scroll Down & Show On Scroll Up

Maximize Your Viewport Real Estate By Hiding Your Header
Hide A Sticky Header In Elementor

Having a sticky header is a great way to improve site navigation for your users. But, unfortunately for users viewing your site with smaller devices (smaller laptops, tablets, smartphones) a sticky header can take up a lot of valuable viewport real estate. This can obscure the view of your content. This can frustrate your user and possibly cause them to look elsewhere for the information they were looking for. Speaking from personal experience, site that incorporate a massive sticky header really really grinds my gears, so to speak. In this tutorial I will show you an easy way to hide your Elementor sticky header scrolling down but have it reappear upon scrolling up. hide sticky header

Things You’ll Need

1. Create Your Elementor Sticky Header

In your WordPress Dashboard navigate to Templates -> Theme Builder -> Add New. Select Header as the template you want to create and name it whatever you like. Then design your header to your personal style.

 

Once styling is completed, it’s time to make the header sticky. With the section of your header selected, navigate to Advanced -> Motion Effects -> Sticky and set it to Top.

2. Add Code To Section

With the header section still selected, give it the CSS ID of “stickyheaders”. Also, change the Z-Index to 199.

 

 

Finally, place the HTML Widget somewhere in your header, add this JavaScript snippet to the widget. The column you set the widget in, set the widget space to 0px.

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos) {
$('#stickyheaders').addClass('headerup');
} else {
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
}); }); });
</script>

<style>
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
</style>

 

 

And that’s it! As you can see, you now know hot to hide a sticky header.

hide sticky header

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Chris Erbstoesser
Chris Erbstoesser
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Table of Contents