A smooth and stable header is essential for providing a professional and enjoyable user experience on your website. However, encountering a "header jumping" issue during page loading can be distracting and diminish the overall quality of your site.
In this article, we will guide you through the steps to fix the header jumping issue that occurs when your pages load.
The Header Jump issue occurs when the Fixed Navigation Bar option is enabled in Divi → Theme Options → General Settings.
The Divi theme has to calculate the Top Padding value that will be applied to the content area so that the Header area (when fixed) will not overlap with the Page's content.
Since the padding value is calculated using jQuery, depending on the server's speed, connection speed, and the page's complexity, the calculation might take longer to complete, causing the Header area to jump.
This padding is also calculated dynamically and depends on the height of the navigation, which can be different if you use a custom font size, custom logo height, or other custom values in menu settings.
This problem can be addressed using two different methods:
Using a Preloader plugin
Using custom CSS code
Using a Preloader plugin
Go to WordPress Dashboard → Plugins → Add New Plugin
Use the Search form and search for preloader
Install any of the plugins that appear on the search results page
Notes:
Some preloader plugins will have different options, allowing you various customization
The preloader plugins hide the page's content with an animated loading icon until all content, including dynamically calculated values, is fully loaded.
Using Custom CSS code
To use CSS code, you must first find the correct calculated value. To do this, you can use the Browser's Developer Tools.
You must find the HTML element with the dynamic value added. The dynamic value is added to the "element style" section, but there is no style sheet for reference.
Usually, it's located at the very top of the Styles tab. Here is an example:
The main content area is the HTML element with the CSS ID page-container. 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:
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;
}