Search
Close this search box.

How to Hide Header on Scroll Down in Elementor

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 our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to turn your WordPress knowledge into revenue? OF COURSE!

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

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

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

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

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

    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
  6. 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
  7. 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
  8. I love this! Thank you. My question is how can I have the menu reappear when the user gets closer to the top than what is in the example? It appears when the user just barely scrolls up from the footer.

    Reply

Leave a Comment

Share This
Haven’t used Elementor Pro yet?
Hey 👋🏻
Do you have a WP blog?
If so, you may need these. All the resources you need to grow your blog.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.

Want to Build Passive Income Like the One on the Screenshot Below?

Click the button on the right side to learn how 👉🏻
5 easy steps to turn your WordPress knowledge into monthly recurring revenue.

Click the above button to close the popup.