How to Make a Sticky Header in Divi

1. Go to the Divi -> Theme Builder and then choose Add Global Header.

2. Go to the Section Setting and add the ID.

3. Go to Divi -> Custom CSS and add this CSS code:

#custom-header {
  width: 100%;
  z-index: 999999;
}

4. Go to Divi -> Integration -> Add code to the < head > of your blog and add this JavaScript code:

<script>
    function scrollFunction() {
	let customHeader = document.getElementById('custom-header');
    	let bodyRect = document.body.getBoundingClientRect();
    	offset = bodyRect.top;
	if(offset < -300) {
	    customHeader.style.top = '0';
	    customHeader.style.position = 'fixed';
	} else {
	    customHeader.style.top = '';
	    customHeader.style.position = '';
	}
    }
	
    window.onscroll = function() {scrollFunction()};
</script>

5. After you style the menu, you should get something like this.

And this is how easily you can make the header sticky in the new Divi Theme Builder.