Just follow steps on the video above. Build your header, give it a css id “hide-header”
Take a HTML widget if you are using elementor. Copy paste this code down below. Do some adjustments according to your header height. And Done !
Like and Subscribe my youtube channel for more interesting topic. Thank you.
<!-- Hide and Show Desktop Header -->
<style>
#hide-header {
position: fixed; /* Keep the header sticky */
top: 0; /* Default position */
left: 0; /* Align to viewport */
width: 100%; /* Full width */
z-index: 1000; /* Ensure it's above all other content */
transition: top 0.4s ease!important; /* Smooth hide/show effect */
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var header = document.getElementById("hide-header");
var headerHeight = header.offsetHeight; // Get the height of the header dynamically
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
header.style.top = "0";
} else {
header.style.top = "-" + headerHeight + "px"; // Dynamically adjust the hide position
}
prevScrollpos = currentScrollPos;
};
});
</script>