How To Automatically Stop Your Fixed Divi Header From Overlapping The Page And Push It down Instead

This tutorial will solve the problem and automatically stop your fixed Divi header from overlapping the page content and push it down instead.

By now you have probably our huge list of Divi Header tutorials. Some of them include making the header transparent, fixed, shrink or change color on scroll, and more! The one thing that everyone keeps noticing with the Theme Buider header is this — the fixed header overlaps the page content. We can’t have that!

This tutorial will not give you the same old solutions others are saying. Margin on top of the header, padding on the first section, and math are all…boring and innefficient. Our solution will automatically solve your fixed Divi header from overlapping the first section no matter how tall it is. Now math or margins needed!

[avviano]

Your channel has a lot of DIVI solutions to annoying problems that I have been bugging Divi support with on almost every site of mine. Thank you for taking the time to make your insights public!!! Keep up the good work...

[nilsapuente]

How come this guy doesn't have a million subscribers? You're awesome!! Thank you so much for your content :)

[karlong]

You rock! I was about to spend hours of my life adding padding to every content container on the website I'm working on. Your solution was a five-minute fix. Thank you! I'm now a life-long subscriber.

[kevinwilt]

Wow. The hours I have spent messing with padding on individual pages to stop them from getting chopped off. This was amazing!

[john-j]

Stellar!!! 🙌 Thank you, the fact that it will automatically adjust when I change the header size it the kicker!! Great information!!

[lastarena]

This is awesome, Nelson. Thank you! Saved so much time. I did notice it's best to disable the section on mobile and tablet, otherwise you're left with a big gap between the header and the content. Thanks again!

[kellyburchelldesign]

oh you are wonderful! I have been fiddling around trying to find a solution to this and generally failing! and then here you come with exactly what I need! thank you so much

[poroshmoni]

Nelsoon, u r a life saver.. one of the boss. thats why now we demand more.. plz sir make more videos for us

[tiffanylin]

Thank you so much! Love how you always have simple solution for these problems

[rufi]

Bro you deserve 3 Million subscribers!

[ivanskoda]

Hi Bro, another perfect tip from you, professional and simple, all I had to do is to paste the snippet to the head in CSS, thank you as always!

[tarik]

Four years later I thank you for this wonderful video!

[pcsolutionscapecod]

Awesome!!!! You saved my sanity! Thank you for the video and the script!

[meli]

this worked for me for awhile. with updating to wp version 6.0.2 and divi 4.18.0 it doesn't work anymore

[FollowMarnie]

Thank you so, so much! 💛💛💛
May I ask how I can fix that overlapping problem for the custom headers? I'm using different headers for landing pages. Thanks a lot!

[imerpacheco]

Amazing! Thank you so much for this tutorial and providing the javascript. It really saved the day!

[JP-suib]

when I have a react project can I just copy paste the code somewhere and if where. or do I have to write the logic new?

[markotavra]

I love you Nelson !!! 🙂 Thanks a lot for this

[rickusjansenvanrensburg]

Nelson to the rescue again! Thank you!

[ivanso]

Is there a way to target screen sizes ie: I only want the desktop header to be fixed but the mobile screens scrolling, so this fix would only apply to the desktop?