Fixed Divi Header – auto hide

In this short post I want to show you how to make a header stick to the top of you screen, and hide/show automatically based on scroll.
Unfortunately Divi doesn’t have too many options for that, which is why we need to add a bit of custom code.

First up, your Header should be built in the Theme Builder.
If you don’t know how that works, check out this overview:

Step 1:

Open your section settings and go to the Advanced Tab.
In there add the following CSS ID:


Step 2:

Make your section stick to the top of the screen by using the Fixed Position (found at the bottom of the Advanced tab).

Step 3:

Create a Code module at the bottom of your row somewhere and paste the following code:
(I recommend adding and editing the code in the wireframe mode. Just click on the purple … button an choose the wireframe icon on the far left of the screen)

var topPosition = 0;
$(window).scroll(function() {
    var scrollMovement = $(window).scrollTop();
    if (topPosition < 200 ){
    if(scrollMovement > topPosition) {
    } else {
    topPosition = scrollMovement;

margin-top: 0px;
.hide-header {
opacity: 0;
margin-top: -200px !important;
.show-header {
opacity: 1;
margin-top: 0px !important;
#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;