Learn how to Hide your Header while Scrolling Down & Reveal While Scrolling Up:
Create a new Header from Theme Builder
Add a Section with your DiviMenus module inside
Make your Section Sticky
Section > Advaced > Scroll Effects > Sticky Position > Sticky to Top
Paste this into Section → Advanced → CSS ID:
dd-header
By assigning this ID to this Section, you will prevent this effect from being applied to other sections on the same page.
Paste this into Divi → Theme Options → Integration → Head*
jQuery(function($) { var lastScrollTop = $(window).scrollTop(); $(window).scroll(function() { var scrollTop = $(window).scrollTop(); if (scrollTop > 150) { if (lastScrollTop > scrollTop) $('#dd-header').removeClass('hide-header').addClass('show-header'); if (lastScrollTop < scrollTop) $('#dd-header').removeClass('show-header').addClass('hide-header'); } else $('#dd-header').removeClass('hide-header'); lastScrollTop = scrollTop; }); });
* Place the previous code in between script tags:
<script>
THE CODE HERE
</script>
Paste this into Divi → Theme Options → Integration → Head*
.hide-header { opacity: 0; margin-top: -150px!important; transition: all 0.5s ease; } .show-header { opacity: 1; margin-top: 0px!important; transition: all 0.5s ease; }
* Place the previous code in between style tags:
<style>
THE CODE HERE
</style>
🥳 That's it!