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
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>
document.addEventListener('DOMContentLoaded', function() {
jQuery(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>
.elementor-nav-menu__container{
top:0px!important;
}
#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>
If you want your menu to show up only on desktop or mobile, simply use the Responsive settings
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; .
