ElegantThemes has released Divi 4.0 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 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. 

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.

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.

Also, don’t forget to read our blog to find more exciting things about Divi.

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

    1. Hi Tersia, I can say nothing without looking at the backend. if you want me to have a look you can give me access to the backend via email. (info@divispark.com)

  1. 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?

    1. 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.

      1. Brilliant!
        I used to fix page content overlap manually with margin and padding. I hope that this script works also with custom post types and WooCommerce products.

        Thanks Sampath!

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This