Did you just create a custom header in Divi and found it overlapping the page content? If so, this post will show you how to fix it.
Divi, as you have known, comes with a Theme Builder feature which allows you to create a custom header for your website. Not only you can create a custom header with your own design, but you can also apply custom behavior to your header (shrinking header, sticky header, etc.).
But as stated on the opening section, there may be an issue with your header after you publish it. Such as it overlaps the page content like the one below.
The right appearance of the header and the page on the screenshot above should be like this.
If you encounter the header issue like the one above, chances are you have changed the position of the section belongs to the header. Usually, the issue above happens when you change the position from Default to Absolute. That being said, you can fix the issue by reverting the position setting of the header section back to Default.
To do so, select the section of the header and click the gear icon on the section handle to open the settings panel.
On the settings panel, go to the Advanced tab and open the Position block. If the position is set to Absolute, change it to Default.
Make sure to click the green checklist icon before you close the panel. Also, click the Save button on the bottom-right corner on the Divi Builder editor to apply the change.
Another Solution
If the solution above doesn’t work, you can try adding the following code snippet. Go to Divi -> Theme Options -> Integrations and paste the code snippet to the field labeled Add code to the < head > of your blog.
The code snippet:
<script>
jQuery(document).ready(function(){
var totalheight = 0;
jQuery(".et-l--header .et_builder_inner_content .et_pb_section").each(function(){
totalheight = totalheight + jQuery(this).outerHeight();
});
totalheight = totalheight + "px";
jQuery("#et-main-area").css("padding-top",totalheight);
});
</script>
To streamline your workflow, you can save the snippet above to Divi Cloud so that you can access it from all websites you build with Divi.
