Elementor Pro, Tutorial

How To Hide Your Header Till User Scrolls Down

Difficulty Rating :
Written byAires DaGraca

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_header

Next 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

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.

Creative Example

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.

Enjoy 😀.


Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

6 Comments

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

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

      Reply
  • Ho can i apply this also form mobile and tablet view ?

    Thank You for your work

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

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.

Request A Tutorial

Have a request I would love to hear about.

Latest Post

How to swap out your logo in your sticky header

This tutorial is going to answer a question that I have seen tons of times across multiple Elementor community groups. And the questions is " How to a change my logo once my header becomes sticky?" .