If you’re experiencing an issue where your Divi website’s header jumps or flashes unstyled content when the page reloads, you’re not alone. This problem can be particularly annoying for users and may even affect the perception of your website’s quality. Luckily, there’s a simple fix that involves adding a small snippet of custom JavaScript to your Divi theme.
In this blog post, I’ll guide you step-by-step on how to implement a quick and effective solution that eliminates the header jumping issue during page loading.
Why Does the Header Jump?
The issue of the header jumping or flashing unstyled content (FOUC) on page reload occurs when the HTML structure loads before the CSS and JavaScript files are fully applied. As a result, elements such as the header may appear unstyled for a split second before the page renders properly. This can lead to a poor user experience.
The Solution: Add a JavaScript Snippet to Divi
The good news is that you can prevent this from happening by adding a small JavaScript code to your Divi theme. The script hides the page until everything is loaded, ensuring a smoother appearance with no unstyled content flashes or jumping headers.
Here’s how to implement the solution:
Step-by-Step Guide
Step 1: Log Into Your WordPress Dashboard
Log into your WordPress admin panel and navigate to your Divi theme settings.
Step 2: Access the Integration Section
Once logged in, go to:
- Divi → Theme Options
- Click on the Integration tab.
Step 3: Add the JavaScript Code to the Header
Scroll down to the section titled Add code to the <head> of your blog and paste the following script:
<script type="text/javascript">
var elm = document.getElementsByTagName("html")[0];
elm.style.display = "none";
document.addEventListener("DOMContentLoaded", function(event) {
elm.style.display = "block";
});
</script>
This script ensures that the HTML of the page is hidden until the page has fully loaded, preventing any flashing unstyled content or header jumps during the loading process.
Step 4: Save Changes
After pasting the code, click the Save Changes button to apply the fix to your site.
Step 5: Clear Cache and Test
Clear your browser cache and any caching plugins you may have on your WordPress site to ensure the changes take effect immediately. Now, reload your page and see the results!
Final Thoughts
By following these steps, you can easily fix the issue of flashing unstyled content or header jumps on your Divi site. This simple JavaScript fix ensures a seamless user experience by hiding the page until everything is fully loaded.
If you’re using caching plugins, make sure to clear them after implementing the script to see the full effect. Share this solution with your developer friends or anyone using Divi who might be facing the same issue.