Automatically Generate Container Space for Your Fixed Divi Header

When opting for a fixed header on your website, you’ll automatically find yourself using Divi’s built-in position options. The fixed position option inside Divi allows you to stick any element to a specific location on your page. When using a fixed position, however, the container space of your element is removed. The fixed header floats on top of your page content creating an overlap that you don’t necessarily want. To avoid this, you can generate container space for your section using a placeholder.

In this tutorial, we’ll show you exactly how to do that using some JQuery code. The code we’ll add at the end of this tutorial automatically calculates the container space of your custom-built header section and assigns that height to a new div around your header. You can use this JQuery code for any kind of header you built using one section.