Learn how to change your site header on scroll using Elementor in this step‑by‑step tutorial. Whether you want a shrinking header, a sticky transparent header, or a completely different design that appears as users scroll, this guide walks you through the exact settings and techniques to achieve a smooth, professional effect
Watch video:
Code Used:
<script>
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('scroll', function() {
let y = window.scrollY;
let newheader = document.getElementById('newheader');
if (y > 150) { /* change this value here to make it show up at your desired scroll location. */
newheader.classList.add('headershow');
} else {
newheader.classList.remove('headershow');
}
});
});
</script>
<style>
.elementor-nav-menu__container{
top:0px!important;
}
#newheader.headershow{
transform: translateY(0);
}
#newheader{
position: fixed;
top:0;
width: 100%;
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
transform: translateY(-200px); /*adjust this value to the height of your header*/
}
</style>
