Over the past a couple weeks I noticed a similar question about how to make the header show/hide as the user scrolls up and down the page.
So in this tutorial we are going to accomplish just that. But before we begin lets get the important stuff out the way.
My staging environment.
Theme: Hello Theme
Elementor Version: Pro ( required for this tutorial )
Additional Plugin: Simple Custom CSS & JS ( Very helpful if you do not want to mess with theme files )
I am going to assume you have already created your header Elementor Pro. Before we get to far ahead you need to edit that template and give it the id of …
Next we need to install and activate our Additional Plugin. Simple Custom CSS & JS will keep you from having to play with the theme files and make this integration so much easier.
Headroom.js is a jQuery plugin that when included to a website correctly will manipulate your header based on whether or not the user is scrolling up or down the page.
Adding Headroom to your website
To add Headroom.js to your website we need to link the files via cdnjs.com. These are the two links we will be using.
To include these files we need to go to Simple Custom CSS & JS and select Add Custom HTML.
Paste these two files below the comments and give it a descriptive title.
Next we need to add the jQuery to get things working.
Select Add Custom JS and paste this script below the comments.
Please note that the id we created in he beginning is included in the script so if you used a different id be sure to change here also.
Please make sure you choose to add this script to the footer.
The CSS Magic
For things to work we need to add some css so things look and work as they should. I added a boxed shadow to the fixed state but you can remove it to add a border or something.
I recommend you add this CSS to your customizer or child theme CSS. If you have followed the tutorial correctly you see the fruits of your labor on the frontend.
The final result..
For those that are not pro member and cannot create your own custom header. You can still use this if your theme uses traditional html semantic tags like header. In this case you would use this script.