How to Hide Header on Scroll Down in Elementor

Updated: January 15, 2022

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

First off, login to login to your WordPress dashboard and go to Templates -> Theme Builder. Click the Header tab on the left panel. 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.

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

28 Comments

  • 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.

    Reply
  • 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 🙂

    Reply
    • 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/

      Reply
  • Work perfectly. Remember activate sticky function in the section to work. Thanks!

    Reply
    • 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!

      Reply
      • 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!

        Reply
  • I`ve always wanted to achieve this header hide on scroll effect but never knew how. Thank you very much for sharing this helpful information free of charge.

    Reply
  • 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!!

    Reply
  • Works fine! But i have a question.
    How can set the header hidden by default when i open the webpage?

    Reply
  • 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.

    Reply
    • Hi, I want the same kind of effect. But also so, that the upper section of header shrinks at the same time and there appears an icon on left side, where you can show the navigation again if you are scrolling down. Like here: https://www.harrywinston.com/ Is this possible with Elementor and do i need some code?

      Reply
  • 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.

    Reply
    • Got the same problem as you. It just disappears in a flash.
      How have you solved it? Thanx in advance 😉

      Reply
      • 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,

        Reply
  • Hi, this works great, thank you!
    Hoping you can help with one thing though -h ow can you make the Menu Cart side-cart not also hide on scroll with the header? Keep the Side Cart window open even when you scroll down?

    Thank you!
    J

    Reply
  • This is REALLY awesome. Except, I have a large header and its leaving a white space when scrolling and hiding the page content. I tried using z index to hide it but that didn’t work 🙁

    HELP

    Reply

Leave a Reply

Your email address will not be published.

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Scroll to Top

It's a minute already. Thanks for staying

Subscribe to get regular articles about page builder plugins and WordPress in general