How to Hide Header on Scroll Down in Elementor

Updated: October 8, 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:

var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
mypos = mywindow.scrollTop();

-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
transform: translateY(-110px); /*adjust this value to the height of your header*/

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 thoughts on “How to Hide Header on Scroll Down in Elementor”

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

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

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

  2. 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!

  3. 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 🙁



Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.