In a previous article, we have discussed the problem of the Divi visual builder not working, one of the other small issues that I have seen people talk about in the Q&A websites, forums, and on various social media groups is the Divi jumping header issue.
I know it's pretty annoying and frustrating when you face an issue and you don't know what to do but don't worry because In this guide we'll show you what causes the header to jump then go through the process of resolving this issue step by step explaining all the tiny details. sounds great ?!
Let get in to it very quick (:
Divi Jumping Header At a glance
With thousands and thousands of users using it, the Divi theme and page builder is becoming the leader of the market nowadays. it offers a variety of different settings that allows you to customize each and every part of your website just the way you want.
Thanks to the great number of the settings that come with the Divi theme. you can remove the header, hide the footer or even customize the little small details of your website design such as the Divi favicon and Divi theme fonts.
in spite of that, the Divi theme has also a couple of issues that you might face while customizing your website, the jumping header is one of them.
What's Divi jumping header?
It's called the Divi jumping header because it's doesn't stick at the top instead, it jumps during the page loading and if you didn't see that on your own website, you might have seen it clearly in other sites that rely on the Divi theme.
Reasons behind jumping header in Divi theme?
Wondering why this issue is happening on your website? Let's find out!
Well, we know that Divi like the other WordPress themes out there makes use of JavaScript to take the custom CSS codes that you put in the additional CSS box under the default WordPress customizer and inject them into the source code.
The problem is that the browser renders the CSS before JavaScript in fact, your custom added styles won't get loaded until the browser renders the Javascript part the thing that causes the jumping issue along with the slow page load time.
So, in order to resolve the problem, we'll be adding some custom code to replace the values that are currently added by Javascript.
Before we start
Before we start working on the issue I do recommend that:
- You create and install a child theme and add the custom code in the style.css file to avoid losing the fixes when you update the Divi theme.
- You test the changes on a local server or use the staging mode if it's available in your hosting to avoid breaking your website.
How to Fix the Divi Jumping Header?
Here we are in the actional part of this guide where we'll walk you through the process of resolving the Divi jumping header in two methods: the first one consists of adding the custom code directly in the style.css file of your child theme or from the theme customizer. In the second one, we'll be using a plugin.
Step 1 : Locating the issue
To locate the issue we'll be using the developer inspection tool integrated into the browsers. so we're going to right-click on the header and choose the “Inspect” at the very bottom of the menu or you click simply click F12 on your keyboard.
Now what you see is the source code of the page, all we have to look for is two CSS property values: the padding-top and the top. In the example shown below the padding-top value is set to 80px and the top value to 32px. those are actually added automatically by the server so we need to replace them with our own values.
Step 2 : Resolving the issue
One thing I want to mention here is that we don't need to change the values on mobile and tablet we only need to fix it for desktop so we'll use the following CSS media query code.
/** fix jumping header in Divi theme **/
@media screen and (min-width: 981px) {
#page-container {
top: 82px !important;
padding-top: 82px !important;
}
}Fix Divi jumping header without a plugin
The options explained below don't require installing any additional plugins because we'll be inserting the code manually in the main Divi theme or the child theme.
1 – Using Divi Theme options panel:
From the WordPress left-hand side menu, go to Divi > Theme options. Once you're in the theme options panel scroll down and you'll see the Custom CSS box, paste the code there then click “Save changes”.
pretty easy right? let's see the next option.
2 – Using the default WordPress customizer:
If you want to fix the Divi jumping header and you don't want to use the first option then you can use the WordPress theme customizer. To do that go to Appearance > Customize scroll down and again add the custom CSS code in the additional CSS box.
Click the “Publish” button to save the changes.
3 – Inside the child theme style.css file:
The right way to doing things is to go ahead and edit the child theme style.css file then re-upload it to your server using FTP. in that way you'll save a lot of headaches and you won't worry about your changes getting erased after doing updates to the core theme files.
Fix Divi jumping header using a plugin
If you don't have a lot of plugins installed on your website and you don't want to deal with any sort of coding then adding the custom code using a plugin would be the best choice for you. there are dozens of free plugins you can utilize to such as :
To show you the process of fixing the Divi jumping header, I am going to use a plugin called code snippets, it's for me the best because it makes it so easy to organize the files, write a title for each one and turn on and off any script whenever you want which is cool!
First navigate to Plugins > Add New then search for code snippet plugin, click install then activate.
Once you install and activate it you'll see it added to the left-hand side menu of your WordPress dashboard, hover on it, and click “All snippets”.
On the top of the editor, insert a title for your snippet to remember it later on. paste the same CSS snippet as I did below then click “Save changes”. the snippet is now added and you can activate it by going back to all the snippets and turn on the toggle button next to it.
Step 3 : Clearing the website cache
The last step in our Divi jumping header guide you can use in case you have done adding custom CSS but they didn't make any effect. don't worry! this is just a problem of caching in most cases. In fact, all you'll need to do is to go ahead and delete the cache from your plugin.
In my case, I am using WP super cache so we will navigate and click on it from the left-hand side menu then under the “Easy” settings tab, scroll down and click the “Delete Cache” button.
Try again!
If it still didn't work then try clearing the browser cache and also purge all the cache if you're using a CDN provider like Cloudflare.
Congratulations! if you made it this far.
Futher Reading:
- Divi visual builder Not Working? (Quick Fixes Guide)
- How to Edit Divi Theme Footer [Easy Guide]
- Divi Google Analytics Set Up Guide (2 Easy Ways)
- Remove Divi logo from Navigation Header
Roundup
To sum things up, every product will definitely have some issues when it's launched for the first time. concerning the Divi theme, the jumping header is one of the most common issues faced by users but fortunately, resolving this issue is not that hard and can be done by simply adding a custom CSS code snippet using either a plugin or add adding it manually.
If I am concerned about the methods I would choose to add the CSS lines directly in the style.css file of my child theme because it helps keep everything in one place and make the website load fast as you keep the plugins count to a minimum.
If you have followed our guide for today and you still encountering the same issue then here are some simple additional steps to do:
- Clear your browser cache
- Clear the cache from the CDN if you're using one
- Check the website in different browser or use the incognito mode.
That's it for fixing the Divi jumping header, if you still have any questions or want to share your thoughts feel free to drop them in a comment below. Stay well stay safe!
Cheers!
