How to Hide Header on Scroll Down in Elementor

Updated: October 13, 2021

In most websites, the header is used to place the main navigation menu, which allows your visitors to explore your website more easily. Often time, visitors judge a website by its header. Elementor Pro allows you to create a custom header on your WordPress site. In addition to the navigation menu, you can also add other elements like logo, social media icons, button, and so on. Elementor also gives you the freedom to customize your website header. Be it changing its appearance or behavior.

Some websites have a header with the behavior as follows:

The header automatically hides when a visitor scrolls the mouse down and it shows up again as the mouse is scrolled up. This practice has at least two advantages: First, it allows your visitors to focus on the content they are reading. Second, it gives extra space for your content, which is particularly great for smaller devices like tablets and smartphones.

Is it possible to apply this sort of header customization in Elementor? One hundred percent!

To give you an overview, the following is the header customization we mean.

How to Hide Header on Scroll Down in Elementor

Note: Custom header is only available on Elementor Pro. Find the differences between Elementor Free vs Elementor Pro.

First off, login to login to your WordPress dashboard and go to Templates -> Theme Builder. Select a header you want to add the auto-hide behavior to and edit it with Elementor. If you have no header template yet, you can create a new one by clicking the Add New button.

Activate the section of the header by clicking its handler.

Go the Advanced tab on the left panel and add the CSS ID “stickyheaders” on the CSS ID field.

Add an HTML element to the section by dragging the HTML widget. You can place it anywhere in the section. In order to make the existing elements keep neatly organized, we suggest you create a new column.

Paste the following HTML code to the HTML Code field and click the UPDATE button.

Here is code:

<script>

jQuery(document).ready(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>

That’s it.

Your website header will now be hidden automatically as the visitors make a scroll down and be shown up again as they make a scroll up.

Originally posted on: November 25, 2019

This page may contain affiliate links, which help support WP Pagebuilders.

Building a website is as fun as playing puzzle with Elementor

22 thoughts on “How to Hide Header on Scroll Down in Elementor

  1. I like this! Thanks for posting this tutorial!
    But: I want to use this with a transparent header: How do I make it so that:
    Option #1 (Preferred): When scrolling back up the page header stays hidden until all the way back at the top?
    OR:
    Option #2: When scrolling up the page header shows up but is not transparent.

  2. This works really well for desktop! However, it doesn’t seem to work for Tablet/Mobile for my site?

    What I’m trying to do is actually have 3 different menus … one for desktop, tablet and mobile. I would like to use this technique for all 3, however I’m finding that it only works for desktop.

    Is there a way to do this? Any help would be greatly appreciated 🙂

    1. As far as we know, Elementor doesn’t allow us to create different menus for different devices, but you can use different settings for each device when creating a menu wit the Nav Menu widget. If you don’t mind spending extra bucks, you can also try JetMenu. It offers more setting options than Elementor Nav Menu widget. https://www.wppagebuilders.com/jetmenu/

    1. Hey! It’s me again.
      I have found a problem. I use a Minicart Elementor, this is open and when scrolling down it breaks and space appears at the bottom because of the size of the .headerup class.
      Any solution?

      Thanks!

      1. I’ve also having the same problem with the space appears at the bottom, and I still haven’t find a way to solve it yet.

        Could really need some help, Thanks!

  3. Hello, this is great! I wonder why the ease effect is so fast. is there a way to make it smoother, such as a fading to make it less abrupt?
    Thanks for this wonderful and simple tutorial!!

  4. Hi,

    thanks for this this really help me but i have a little bit tricky header.

    I have two column in a inner section
    1. logo and search bar
    2. nav menu bar

    i just want to apply this effect to my 2nd column only and its working on that too but there is a problem its working only on nearby header not on all page height.
    i hope you understand my concern.
    please assist me if i am doing something wrong.

  5. Hello! Thanks a lot! It worked!

    Is it possible to make it disappear through moving so it will not just disappear at once?

    For example like on this website https://saasmantra.com/

    I tried to change transition : transform parameter, made it 1 sec, but it doesnt help.

      1. Hi Matthijs,

        On the JavaScript code, you can change the transform value to the duration you want (in second). You can seek for the following line to change the transform value.

        transition : transform 0.34s ease;

        For instance, for a slower pace, you can change the transform value to 2s.

        Hope this help,

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.