Sticky and Stylish: Elementor Header Tricks You Need to Know!

    

<script>
jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 40) {
		   $('#masthead').addClass('stickyheader');
		} else {
		   $('#masthead').removeClass('stickyheader');
		}
	});
})
</script>

<style>
#masthead{
    position: sticky !important;
    top: 0px;
    z-index: 99;
    display: flex;
    flex-direction: column;
}
#masthead #headerbg{
    transition: all 0.5s;
}
#masthead.stickyheader #headerbg{
    border-radius: 1000px;
    margin: 10px auto 0px auto;
    max-width: 90%;
    backdrop-filter: blur(10px);
}
</style>