Add a section to the theme builder header

• position is fixed at the top
• give it the ID global-header-section

Then add a row with the content and a code module with the following script and css. Derived from https://www.elegantthemes.com/blog/divi-resources/how-to-reveal-your-global-header-while-scrolling-up-hide-while-scrolling-down-with-divig

<script>
jQuery(function($){
   
var topPosition = 0;
 
$(window).scroll(function() {
 
    var scrollMovement = $(window).scrollTop();
   
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
});
</script>
<style>
#main-content{
margin-top: 0vw;
}
 
.hide-header {
opacity: 0;
margin-top: -200px !important;
}
 
.show-header {
opacity: 1;
margin-top: 0px !important;
}
 
#global-header-section {
transition: all 1s ease !important;
}
</style>

Code language: HTML, XML (xml)