Maybe you’re frustrated when you’ve found the customizable headers in Divi. We’re creating a Theme Builder that doesn’t have the sticky header features (A static header while scrolling). But still, I’m sure, they’re going to include those in the upcoming updates.

In the meantime, I’m try to take you all an alternative with one thing. I’m trying to inform you how to create the Divi sticky headers.

Stage 1

How do you create sticky custom headers in Divi Builder? Just make your Theme Builder header. It’s the way you like. Test this way out.

Stage 2

Then insert a CSS snippet to the Page using any tool that you usually use to insert CSS to the Divi websites.

.et-l–header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 99;

}

.logged-in .et-l–header {

  margin-top: 32px;

}

And once again, insert this jQuery code to your site. You could paste this into Theme Options > Integration > Add code to <body >. Does not miss to paste the script tag under.

jQuery(document).ready(function( $ ){

  var header_height = $(‘.et-l–header’).height();

  $(‘#et-main-area’).css({ marginTop: ${header_height}px });

});

This is how to create sticky custom headers for Divi. It’s expected to work without any problems. 

Divi October Sale

Crazy Discount
20% Off

Save Big When You Buy Today
* Terms & Conditions Apply
Divi October Sale

Crazy Discount
20% Off

Save Big When You Buy Today
* Terms & Conditions Apply
close-link
WP Engine CyberWeekend , Get 4 Month Free For Annual Plan Or 20% On 1st Month For Monthly Plan
Apply Coupon
close-image

Download all the Divi Freebies!

Weekly Free Divi Layout Pack, Free Design Kit, Free Divi Extension, and Many More
DOWNLOAD HERE
close-link
Click Me