When styling your Divi header via the Theme Customizer, Divi assigns CSS to both your page-container and main-header ID. This CSS is then injected using Javascript which is what causes the Divi jumping header.
Your browser will render CSS before it renders Javascript, so the trick to get this fixed is to make whatever changes you want to the header, then inspect the elements using the Developer tools of whichever browser you are using. You will need to locate both the above CSS IDs and check what padding is being injected with Javascript, then add these directly to your stylesheet and voilá! Your jumping header issue is gone!
My example below was from my own site, but it is so that you see what your CSS should look like when you add it to your stylesheet.
#page-container { padding-top:99px !important; }
#main-header { top: 31px !important; }
Credit goes to SJ of Divi Space who initially wrote the fix for this and Alex of Unforge Web Design who reminded me of the existence of this fix.
Note: Since writing this article, the above fix no longer works, in particular with the latest version of Divi. I will attempt to work on an updated fix when time allows.
Fix for newest version of Divi: Find sticky module in div that appears when sticky header engages. You will notice a “top: XXpx”. That is the culprit. Copy the css selector for that element.
My solution looked like this:
div.et_pb_section_0_tb_header:nth-child(1) {
top: 0!important;
}
If you have noticed that the headers don’t jump in Chrome, it is because Chrome has a built in feature that fixes jumping elements. https://www.theverge.com/2017/4/11/15260994/google-chrome-update-fixes-page-jumps-scroll-anchoring
10 hours of my time wasted on this. My pain is your gain.
Any news on this? I’ve just spent hours and hours trying to figure out why one of my Divi sites did this and the other one didn’t. After a painstaking process of elimination, I finally realised it was the damn transparency I’d set for the main menu! – Hence my arrival at this post. It only crops us with RGBA and not a specific, solid colour. I’ve also tried some CSS in each pages’ settings to override it but it didn’t work
It does seem odd that Elegant Themes haven’t come up with an update to put this glaring problem to bed yet.
Hi, unfortunately I am not in a position to revisit this post and look for an alternative solution given some other priorities. I would recommend reaching out to Elegant Themes directly through their support who may be able to provide a fix.
Found a solution. Check the thread. Let me know if it works for you.
hello
i trid above all the css but no one is worked for me. please help.
It does state that this fix is no longer working. Unfortunately due to other commitments, I’ve not had a chance to work on a fix.
Hi Catarina,
sadly, none of the CSS fixes mentioned above worked for me, but after hours of “try and error”, I finally found a solution to fix my jumping transparent header:
#main-content {
padding-top: 138px !important;
}
.et_pb_fullwidth_header {
padding-top: 138px !important;
}
Hopefully this could be a solution for others too!
Fabienne you are my hero. That code snippet (with my own values inserted) worked!! I’ve been at this for over an hour and almost pulling my hair out in frustration. THANK YOU!
Thank you, Fabienne. Your CSS worked perfectly!
hi guys
ive been trying the padding and top solution but it doesnt seems to work…
my website is http://landscapings.co.il
im hopeless in this, and if anyone got other solution ill be more than happy to hear
Hi Yatir,
I can’t see your header jumping when I load the site… also note that since writing this article this fix no longer works with the latest Divi.
Hi Catarina – I seem to have several values attached to padding-top on my page container. I’ve tried several combinations, including:
#page-container {padding-top: 0px !important;}
#main-header {top: 65px !important;}
I’m wondering if you would be able to help me see what I’m missing at http://www.glowmetrics.com/
This sounds like the fix I’m searching for, so I’d really appreciate your help…Thanks!
Hi Colette,
Note that this article was correct at time of writing but it seems like Divi have since updated and this no longer fixes the jumping header.
I seam to be one of the ones who is having trouble making this work, haha.
Im using
#page-container { padding-top:79px !important; }
#main-header { top: 46px !important; }
and it doesn’t make a difference on my site livingchirpy.com, any suggestions? Thanks!
You have quite a few things “messing” with your header, like plugins for subscription and stuff, these may be interfering with the code. I couldn’t actually experience the jumping header on your site.
I have tried this using
#page-container { padding-top:166px !important; }
#main-header { top: 46px !important; }
and it seemed to work in IE (of all things)
but not well in Chrome or FireFox
I have since removed it.
http://www.njpackagingservices.com
Any suggestions would be greatly appreciated!
Hi Leon,
Having inspected your code I can actually see that the padding-top for your page-container is 165px not 166px and main-header top margin is 47px not 46px. I can’t see what you refer to as the code you’ve added on isn’t there.
Thank you for your quick response!
Your settings seemed to do it.
Initially, I coulnd’t find the exact numbers so I was trial and erroring.
Then I removed the settings from my custom css. (That’s why you coudn’t see them.
Hopefully when I go back to optimize the whole thing for speed, everything will still work.
Thanks again!!!!!!!!!
Hi Catarina, Thank you for this. I have tried this after finding it on Divi Space. It works until you start scrolling and then you get a gap at the top of the page as if the header is starting 0.5cm lower than the top of the page. Apart from this it worked other than a slight jump on the home page and I think that is because of the position of my first slider. If you could offer any help that would be amazing. Thank you. This is what I loaded;
@media (min-width: 981px){
#page-container { padding-top: 144px !important;}
#main-header { top: 32px !important;}
}
Hi Catherine,
I’m glad you have found it of use. Having looked at your site, I can’t see this gap you refer to. Have you now fixed it?
With regards to the slider jump, this may have something to do with giving your slider module a specific height. If you want your slider to be full height it is easier to give it a height of 100vh; rather than a specific height number.
Hi Catarina, Thank you for your reply. I am sorry, I didn’t know you had replied. It isn’t solved, other than the Divi Space blog and yours I haven’t seen any other reference to it, which I find strange. I had to take the code off as it wouldn’t look very good leaving it like that. I am looking for someone who can help fix it. As far as I can see the slider hasn’t got a specific height, where would you put this information? All pages have the jumping issue, the code puts this right but then you get the gap. When the code is in the home page still has a slight jump, I think it is down to the central loading of the slider. Doe you have any ideas? Thanks!
Hi Catherine,
I’ve tried replying to your email but I have received an error come back from your server. Please email me a direct email contact.
Hello!
I have been trying to use this fix to solve my jumping header issue on a site I’m building with no success so far. It seems to have something to do with the transparency setting on the header. Any other thoughts as to a solution? The site is http://www.hannelebehm.com/home
Thanks so much!
Having looked at the site, it looks like one of your sliders, the first one is smaller than the others which is the reason why it is jumping. Your first slider is 479px height and others are 1028px. Hope that helps 🙂
Have you drawn it to the attention of ET and asked them to build in a fix?
Hi Martin,
No, I personally haven’t but I know of fellow Divi users who have brought this to ET’s attention several times.