For this short tutorial I will show you how to hide your header completely until the user scrolls down a certain amount of px. So be before we begin let’s get the important stuff out of the way.
My Working Environment
Theme: Hello Theme
Elementor Version: Pro ( Needed to build custom header )
Additional Plugins: Simple Custom CSS & JS
Let’s Begin
Go to your header template and give it the ( Id ) of :
site_headerNext go to your scrolling effect options and select sticky top and also increase the z-index to 50 or higher.
The CSS
For the css you can include the CSS within your section options or add it to your customizer the choice is really yours. I added mine to my child theme.
Copy and paste the below CSS
@media (min-width: 1024px){
#site_header {
display:none;
width:100%!important;
}
}
The jQuery
To add the jQuery to your site we will be using our additional plugin Simple Custom CSS & JS.
Navigate to Custom CSS & JS > Add Custom JS and paste the jQuery below and give it a descriptive title. Also choose to have the JS placed in the footer of your site.
jQuery(document).ready(function( $ ) {
jQuery(window).scroll(function() {
if ( $ (window).width() > 1024) {
if ( $ (window).scrollTop() >= 400) {
$ ('#site_header').fadeIn();
} else {
$ ('#site_header').fadeOut();
}
}
});
});
Save it and witness the magic that is jQuery.
Final Result
Creative Tip
If you want to be extra creative duplicate your header inside your template and do not apply the sticky top and leave off the ID. This will give you a menu on page load but will flow upward when the users scroll and the sticky header will slide in to view later down the page.
IMPORTANT :: If you correctly complete this tutorial when return to your template to edit or make changes your header section with the id of site_header will not be visible because of the CSS. You may need to comment out the CSS to make changes.
28 Responses
how to enable it just on home page?
Hi Yury,
All you would need to do is make sure that the header is only visible on the homepage and then create a separate header for the rest of your site.
How make the same efekt on tablet or phone?
Hi Zbigniew,
You need to adjust this bit of jQuery
//Decides when this script will work 1024
if ( $ (window).width() > 1024)
change the 1024 to something smaller like 450 so it will work on screen bigger than 450 px. You would also need to adjust the media query as well.
Ho can i apply this also form mobile and tablet view ?
Thank You for your work
Hi Mario,
You need to adjust this bit of jQuery
//Decides when this script will work 1024
if ( $ (window).width() > 1024)
change the 1024 to something smaller like 450 so it will work on screen bigger than 450 px. You would also need to adjust the media query as well.
This works on my chrome browser while logged into wordpress. However if I load the page on a different computer with chrome, it will not work. The header will just be missing throughout the page. Doesn’t seem to be an add-on issue as I can get other JS to work just fine.
I had this problem and then noticed I’d not clicked to have it in the footer as per the instructions. It then worked. Make sure you’re loading the code in the footer as it defaults to header.
I have the same problem… only when I’m logged in it works fine…
Thanks for the tutorial
What if I want it to be hidden during the scroll below and displayed in the scroll above?
Maybe this will help https://www.iheartelementor.com/introduction-to-headroom-js/
Hello, thanks for this! One problem… when I use on mobile and click on my menu after freshly loading the page, when half way down the page, the menu opens but higher than it’s supposed to. If you scroll back up a little it corrects itself though. Any idea why this is happening and how to fix? Thanks.
Can you provide a link so that I can view your issue.
I’ve been trying to provide a link but my reply never shows up.
-Dan
Hi first of all thanks for the topic!
Secondly: when I paste the CSS in the CSS box of the header, it gives me an exclamation mark within a yellow triangle on the line: width:100%!important;
Is there a way you could help me?
thanks!
Evening Voets Media,
Did you copy and paste the css as I have above.
Hi Aires, any update to the question I posted? Really looking forward to a solution. Thank you!
I hope to have a solution for you today Dan.
Ok I look forward to your response, thank you!!
is there a solution for Dan´s problem. I have this too and cant figure out the issue
Hello Aires, any update to the question Dan posted? I am not able to find a solution.
Hi, thank you very much for this tutorial. I want to make some changes but as you say in your note at the end
re: IMPORTANT :: If you correctly complete this tutorial when return to your template to edit or make changes your header section with the id of site_header will not be visible because of the CSS. You may need to comment out the CSS to make changes.
Problem is: I cannot click on the element as it is hidden. so I can’t get to the CSS input in the Elementor editor. What’s the solution?
Use the Navigator! 🙂
Hi Aires,
Thank you for the tutorial. Unfortunately, it doesn’t work on my site (yet). The header disappeared but isn’t showing when scrolling. Not sure what I’m doing wrong. I would like to have the header only shown when scrolling after a number of pixels.
Hopefully, you could help me out.
Thank you and kind regards,
Angela
Can you provide a link so that I can view it.
Thank you Aires, I applied it easily on my website. Can you help me with the jquery if I want the #site-header to appear not only on scroll but on hover (mouseover), too
Hi Adrienne, You want the header to show when you mouse over what element exactly.
Hi Aires, I`d like the white background header to show when mouse over the transparent header (same as scrolling but a different function). However, since then I have another issue. I`ve used your jquery script on two websites so far. One recently was updated to WordPress 5.7 (due to hosting settings, out of my control). On this site, the header that should fade-in and fade-out on scroll, does not work. Using Elementor Pro, originally I added the script to the Footer template in Theme Builder with an HTML element. It is still working fine on the other website with WordPress 5.6 but on 5.7. Tried using the Head and Footer script plugin but still doesn`t work.