Elementor Change Header on Scroll With Smooth Animation

No extra plug-ins required! Elementor Pro Required.

To begin with, create your new header in a new section

It can be anywhere on the page. If you want the changing header on scroll on every page, then create it in your header template. Header templates are a Elementor Pro feature.

Then, give that section a CSS ID of ' menuhopin ' and a Z-Index of 999

Elementor Change Header on Scroll - With Smooth Animation

Finally, simply add the code below in an HTML Element

Adjust the transform:translateY value at the bottom of the code to match the approximate height of your header.

<script>

jQuery(document).ready(function( $ ) {
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 300) { //change this value here to make it show up at your desired scroll location.
$('#menuhopin').addClass('headershow');
} else {
$('#menuhopin').removeClass('headershow');
}
});});
</script>


<style>
#menuhopin.headershow{
transform: translateY(0);
}

#menuhopin{
position: fixed;
top:0;
width: 100vw;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
transform: translateY(-110px); /*adjust this value to the height of your header*/
}

</style>

Elementor Close PopUp on Click for Menu & Same Page Links
left html element

If you want your menu to show up only on desktop or mobile, simply use the Responsive settings

Easily Create a Responsive Elementor Mega Menu for FREE

If your menu is an horizontal bar at the top of the page, the above code will work perfectly

For any other placement, modify the CSS. If it needs to appear below something else, change the  top: 0;  value. If it is placed to the left or right of the page, remove width: 100vw;  and add left: 0; .

Et voila! Thanks for reading!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >
Change CSS of Elements by Using the Inspect Tool
Learn

Change CSS of Elements by Using the Inspect Tool

One of the most frequent request by people using Elementor is how to change the look of certain specific elements. And the most frequent answer is CSS.

The problem is that most people don't know how to properly use the Inspect function to target the right element, and modify the CSS. Here is how.

Read More »

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

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