The first sections or some of the full-width modules or main content areas have top padding if you use custom navigation settings. This padding gets calculated dynamically via jQuery and depends on the height of the navigation, which can be different if you use custom font size, custom height of the logo, or other custom values in menu settings.
The issue relates to how jQuery behaves by design, as jQuery scripts run only after the entire page is loaded, including images and videos.
At the end of the loading process, jQuery calculates the height of the elements, converts it into a padding value, and adds it to the first section, to the first fullwidth module, or to the main content area.
To fix the issue, you can use a preloader plugin or set custom padding manually using CSS code.
The preloader plugin will hide the page's content with an animated loading icon until all content is fully loaded, including dynamically calculated values.
To use CSS code, you must first find the correct calculated value. To do this, you can use the Browser's Developer Tools. Here is the tutorial for Chrome.
You must find the HTML element with the dynamic value added. The dynamic value is added to the "element style" section with no stylesheet for reference. Usually, it's located at the very top of the Styles tab. Here is an example
The page-container is the main content area. If you do not see the dynamic value, you can continue searching for the next element, the first section, or the first module. Here is an example of where you can find the first section and first module:
Once you have found the dynamic value, you can place the CSS code in the Divi > Theme Options > Custom CSS box.
For main content area:
#page-container {
padding-top: 109px;
}For the first section:
.et_pb_section:first-child {
padding-top: 109px;
}For the first module in the first section:
.et_pb_section:first-child .et_pb_module:first-child {
padding-top: 109px;
}The top padding is not the only value that is calculated dynamically. The position of the primary navigation is also calculated via jQuery. You can find it in the same way:
In this case, you will need to use another CSS selector and another CSS property:
#main-header {
top: 43px;
}