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.
30 thoughts on “How to Hide Header on Scroll Down in Elementor”
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.
Hi Justin,
We have this tutorial too in case you haven’t read it https://www.wppagebuilders.com/create-elementor-page-with-transparent-header/
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 🙂
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/
Work perfectly. Remember activate sticky function in the section to work. Thanks!
Thanks Carlos! Was trying to figure out why it wasn’t working for me at first.
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!
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!
Thanks Carlos. Your reply was the key!
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.
Hi, great our article could help!
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!!
Works fine! But i have a question.
How can set the header hidden by default when i open the webpage?
We consider writing another article for this 🙂
Hi This works fine when i am logged in as admin but does nothing when not logged in?
This thing sometimes happens on Elementor. Not sure if is a bug.
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.
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?
It’s not working when you open site in incognito mode
Thankyouuuuuuuuuuuuuuuuuu so much. This is worthy for non coders very much.
Rohan,
We are really glad our article could help
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.
Got the same problem as you. It just disappears in a flash.
How have you solved it? Thanx in advance 😉
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.
For instance, for a slower pace, you can change the transform value to 2s.
Hope this help,
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
it’s cant work properly in the mobile version!!!!!
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
It doesnt work with containers
thanks
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.