How to make sticky custom headers in Divi 4.0

ElegantThemes has released Divi 4.0 a few days ago. Pretty amazing. huh? Yeah, I love all those updates. But…. still, they are missing some must-have features. 🙁

It’s disappointing when you discovered the custom headers, we are building with the Theme Builder don’t have the sticky features. (The fixed header when scrolling). But still, I am sure they will include those in the coming updates.

Meanwhile I am going to give you guys a solution for a one thing. I am going to tell you how to make sticky headers in Divi 4.0.

STEP ONE – How to make sticky custom headers in Divi 

Just create your header in Theme Builder. The way you want. Below is what I did for testing. 

How to make sticky custom headers in Divi 4.0

STEP TWO 

Now add below CSS snippet to the Site. Use any method you normally use to add CSS to your Divi sites.

.et-l--header { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 99; 
} 
.logged-in .et-l--header { 
  margin-top: 32px; 
}
.et-l--header { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 99; 
} 
.logged-in .et-l--header { 
  margin-top: 32px; 
}

And again, add this jQuery code to the website. You can paste this in Theme Options > Integration > Add code to the < body >. Don’t forget to paste in a Script Tag like below.

How to make sticky custom headers in Divi 4.0
jQuery(document).ready(function( $ ){ 
  var header_height = $('.et-l--header').height(); 
  $('#et-main-area').css({ marginTop: ${header_height}px }); 
});

That’s how to make sticky custom headers in Divi, guys. It should work without any issues. If you got any, do not hesitate to comment below.

9 thoughts on “How to make sticky custom headers in Divi 4.0”

  1. Hi, I have created a subscribe menu item plus email optin to show on hover as per your instructions but when I load the site both the menu item (Subscribe) and optin form is only visible for a second after which both disappear. Any ideas?
    I am working on a dev site
    Much appreciated

    Reply
  2. nice work. I don’t really understand the scipt part, as the header is allready stucked to the top with css?
    Is there any way we can make it shrink like default divi header?

    Reply
    • Hi Ziga, The script part is for calculating the header height and set it as the ‘content area top margin’. So you no need to do it manually. Otherwise page content will hide under the header.

      Reply

Leave a Comment