How To Automatically Stop Your Fixed Divi Header From Overlapping The Page And Push It down Instead
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- This tutorial will solve the problem and automatically stop your fixed Divi header from overlapping the page content and push it down instead.
View the blog post and snippet: bit.ly/OverlappingHeader
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!
Join The Divi Teacher Facebook group: / thediviteacher
Visit our Divi child themes, plugins, tutorials, and courses here: www.peeayecrea...
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...
Hey you're welcome, it's feedback like that from people who appreciate it that keeps me going! I have lots planned, and let me know if you have ideas!
How come this guy doesn't have a million subscribers? You're awesome!! Thank you so much for your content :)
Hey Nilsa, we had 35 in November so I think over 1500 right now is pretty good :) Thanks for the encouragment!
Wow. The hours I have spent messing with padding on individual pages to stop them from getting chopped off. This was amazing!
Glad it helped!
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.
Awesome! Thank you! So glad to save you time.
Stellar!!! 🙌 Thank you, the fact that it will automatically adjust when I change the header size it the kicker!! Great information!!
Thank you, yes this is really cool. I'm glad you found it and be sure follow along for more stuff like this!
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!
Indeed, I have that same issue since I have my header fixed only on desktop but not tablet / mobile. I dont have much idea about divi just starting to build my own site, would you mind sharing how to disable this on mobile / tablet and have it enabled only for desktop? Thanks!
@@FerPina Hi Fernando. Just go into grid view and find the section that was added on top of the page and go to the advance section. Under visibility, click disable on phone and tablet.
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
Four years later I thank you for this wonderful video!
You're very welcome!
Nelsoon, u r a life saver.. one of the boss. thats why now we demand more.. plz sir make more videos for us
Thank you, new tutorials every week!
@@PeeAyeCreative we demand 2 tutorials every week
life saver! thanks!
Glad it helped!
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!
Thank you sir, I'm really glad you like the tutorials!
Thank you so much!! subbed
You're welcome! Enjoy!
Thank you so much! Love how you always have simple solution for these problems
thank you, its really helpfull
Glad it helped!
Nelson to the rescue again! Thank you!
Haha yes ☺️
Bro you deserve 3 Million subscribers!
I know right 😉
Awesome!!!! You saved my sanity! Thank you for the video and the script!
nice solution man..
Glad it helped
awesome!! i went the route of just adding "random padding". :) going to revise with your script.
Sounds great, Jeff! :)
I love you Nelson !!! 🙂 Thanks a lot for this
You're welcome! 😊
Nice! Thx bro!
You're welcome!
Thank you!!!! You saved my life 😂
You’re welcome 😊
Amazing! Thank you so much for this tutorial and providing the javascript. It really saved the day!
Wish I’d known this a long time ago! Thanks.
Happy to help!
Another genius video from genius mind
You're very kind, thank you for that! :)
Thank you! You are a life saver!
Glad to hear that!
So good when you stop that head against a brick wall thing!
That is certainly a good thing!
Keep up the amazing work! I have watched all of your videos and look forward to more awesome content :)
Thank you so much, I definitely have a lot scheduled coming up! :)
YOU FUCKING SAVED ME BRO!!! I LOVE YOU
Again Amazing work! Thank you Nelson / Pee Aye Creative Rocks!
You're welcome Francis, glad you like it!
AMAZING thank you it worked, though I was the only one with this problem.
Hi Leticia, you're not the only one! Glad this helped!
another nice tuto, 👍
Thank you, very happy with this one!
Super helpful, cannot that you enough! :)
That's great Jana, I'm so glad!
this worked for me for awhile. with updating to wp version 6.0.2 and divi 4.18.0 it doesn't work anymore
Thank you thank you thank you!!
You're very welcome! 😊
my hero! thank you so much, was going crazy here :P
I'm glad I could help!
you are hero
thank you for good job
You are welcome! 😀
We don't use Divi but, we are facing an issue with the overlapping header. Do you think that snippet would work outside of Divi or would the Divi theme would be required?
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!
Thanks that's so helpful!!!
Thanks man,much appreciated.
No problem 👍
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?
Is there a way to achieve this when using a transparent header?, i.e. not move the entire page but the section?
Awesome ! Exactly what I needed! Thank you! "Well..you're guessing and it's inefficient and it's rather stupid to do that..." LMAO!
Haha I think I'm getting less formal 😂 Glad you liked it and found it helpful!
Great video! If you use a regular image as your logo include this code too. (Just swapped .et_pb_menu__logo with .et_pb_image_wrap
/*set the transition for the logo shrinking action*/
.pa-header .et_pb_image_wrap img {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*change the logo size when the header shrinks*/
.pa-fixed-header .et_pb_image_wrap img {
max-width: 80%;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
Hey Mr. Corr, I'm guessing you intended this for my other video on the shrinking header, correct?
@@PeeAyeCreative yes! I was starting a new site so had so many tabs open and many were your great tutorials! Ill post it over there in case people want to use a regular image
I have problem were the body goes really below leaving a white space along with it... were do I change what are you mention here? my header is a kind of Shows after some pixels, Change styling method...
Hii, I m having a similar problem where my sticky nav bar hides contents on page when I use smooth scrolling.
Thank you so much, game changer!
Great to hear! You're welcome!
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?
Perfect... Thank you ... Now I need something for the logo 🤣🤣🤣 make it bigger than the menu... And can shrink when the menu shrink...
Hey Christian, you're welcome! Have you see my other video/tutorial, it is on exactly what you described: www.peeayecreative.com/how-to-shrink-the-divi-header-menu-when-scrolling/
@@PeeAyeCreative of course... But I'm looking something to make the logo bigger than the menu..
And when the menu shrink.. the logo shrink too...
Sorry for not explaining so good..
how to solve the problem of overlapping of image slider on navigation bar. Because When I created my Image slider it is not compatible with my Navigation bar as the Image is Overlapping on the Navigation bar and creating problem for the Navigation bar.
This is great solution thank you so much, would it be possible to use the same code for the Seccion that is flexed below the page? Thank you in advance.
I'm not sure what you mean, but depending on your situation you could adapt it.
Hi, great vid 👍
Got a slight issue: i’m very new to divi. Created my header in divi builder. Added your fix. Then I’m adding a full width header module on my home page. I have made it fit full screen. Problem is it now the 100% now goes below the fold. I’m guessing it’s moved down by the size of the header pushing it down? Anyway to solve this. Sorry if this has been asked before, cheers
Hi Robert, good question, I haven't tried that but I'm not sure how you could have a full height section and yet also have a header, so I guess that is the underlying issue - physics.
I have a similar problem .. a fixed column of a section is overlapped by the footer .. any solution for that?
I don't understand
I really appreciate these tutorials.
This work well, but it seems to introduce a different problem.
Anchor links place the user below the start of the content by the height of your header. I've tested this by removing the fixed value and the snippet. The links again behave as expected.
Yes, this has been discussed on the blog comments. You just have to place the anchors higher I suppose. Don't know any clever ways to solve that!
I wonder how this can work for a left side menu. Mine is overlapping the content on smaller screens long before it turns to the mobile layout.
It would not be applicable to that.
@@PeeAyeCreative ok. I was trying to see if the code could be changed for that purpose. Thanks :)
Do I have to have created the header with Divi header? I haven't used this so wanted to know if there is a way to do this without divi header? Thank you
Hi Tatiana, this tutorial is about fixing the overlap that is created when you make a header built with the Theme Builder fixed. I don't think there is any issue with the regular one.
Great post - one quick thing: I get a white space below mine but only on tablet and mobile. Any ideas?
Hi Albert, a couple people said they had that issue with a box shadow, but I couldn't replicate that.
Thanks a lot for this. I have one question, I would need this to happen in all the pages but the landing page (as I use a transparent header and I need the header to overlap the image in the background). How can I do it so the code you posted to apply to certain pages? Thank you
Hi Javier, I haven't tried it but you could start by changing the CSS class in the jQuery. Try using a custom class in your section in the template for the other pages instead of .et_pb_section
Man, it didn't work for my page. I was hoping it would because I can't open my blog post main page to edit manually in Elementor and my top post title is cut off.
This is for Divi
this doesnt work if you build a fixed header navigation on each individual page as i did. I needed a different header for each page. THey are all different colours. So i jut built the menu at the top and now i have this problem and no way to fix it
Okay
Hello, very good tutorial.
I have announcement bar allowed only on home page. Adding this code will leave space on top of the page because I do not want announcement bar to be fixed. Can I make exeption and how to home page?
Hi there, if you don't want it to be fixed you could just put it on that page instead. The code was made specifically to stop the overlap issue.
Doesn't work for me because I made a custom global header with a left slide in menu, that is full height. So sad...
Hmm
can you please help me to fix a problem. My mega menu is just hiding behind the banner or any image, whenever i hover my cursor to dropdown the mega menu content we can say that the image and banner overlap it. plz try to help me.
Hi Mohit, you can post this question in our Divi Teacher Facebook group if you want!
I have used this successfully on a couple sites, but on one site it isn't working. How odd is that?
Not sure
@@PeeAyeCreative Thank you. I know that my reply was vague. I discovered that there was a bit of code hiding in my content from a previous menu customization. Your code worked perfectly as before. You are truly the best!
I was wondering if you had any recommendations for how to do this with two headers? I am trying to design two different headers (one for the desktop and one for tablet/mobile). Even though the desktop header isn't visible the code still adjusts for it, leaving a gap
Hi Kendall, I had not thought of that scenario, I'm not sure. It would be best practice to use just one header and not to use the visibility settings though because it creates duplicate content.
@@PeeAyeCreative Okay that makes sense, thank you!
I noticed this code calculates the shadow on the header div as well... anyway to fix that (beisdes removing drop box shadow)?
Huh? It's not doing it for me, not sure what you mean.
did you find any solution
my website header goes too low
I always have a gap before I make changes. I always have to pull the body up .
Hey Drew, can you clarify what you mean?
Hey there! Is there a way to make this work for Posts as well as pages? It seems the top of posts are still obscured. Thanks!
Hey Warren! I just went in and set this all back up. Phew! It does work on posts. I was kind of wondering why it wouldn't. Are you using the Theme Builder on the post? Maybe that is a factor, but I tested both and it worked.
@@PeeAyeCreative Absolutely! Thanks for the reply! Yes, seems posts that have been put into the Divi editor then updated are fine. Posts created using the stardard editor are not. I appreciate you taking the time to get back to me. Stay well and keep your great videos coming!
im getting space below mine. fixed header is for all devices and there is no anchor link. any ideas?
Hi there, I'm not sure what you mean about no anchor link. And you mentioned for all devices...can you elaborate? Also not sure about the spacing...is there a box shadow on the section? I have heard that some users had that issue.
@@PeeAyeCreative i dont know what happened but it vanished "all by itself" lol so back to how it should be
have the same issue, no shadow still a substantial space between header and body @@PeeAyeCreative
Your code didn't work. I'm using Divi 5.5
It does work, so you will have to give some context if you want to find out what is different at your site.
A compliment and a question. Your guides have elevated our web design business skills and we look forward to continuing to purchase your products. The Question: Is it possible to get this to work with the code for "How to Swap Your Divi Header for Another One on Scroll" found here (www.elegantthemes.com/blog/divi-resources/how-to-swap-your-divi-header-for-another-one-on-scroll). That is, our website uses the swap divi header menu functionality on scroll but much like your example before your fix and countless others the menu overlaps the content. However, when we added the provided code in your blog post it created tons of space between the menu and our main content on each page and we were unable to get around how to resolve this. Thanks!
Hi there, I'm not sure without seeing it. Must be something conflicting with their code.
@@PeeAyeCreative Thanks for responding. We continue to love and support your content. It's funny that you say that because just a few hours ago we discovered a solution based on a few days of research and it was indeed a specific conflicting code error. We were able to just add some padding via a media and js query before the main content on each page to resolve the issue. Your guide for making sure the fixed header doesn't overlap content is a more adaptive and smarter fix but in our instance we just had conflicting code. Have a good one and keep up the great work!
You are great! SUBSCRIBE!
Thank you! ;) Sounds good, lots more like it coming!
It did not work. No change.
Sorry to hear that.
it doesnt work. But i dont know why
ok i guess it just works with the divi section boxes, not with the integrated wordpress options before starting divi.
Yes this is a Divi tutorial
my main header is jumping and expanding downward on page load. its default divi header. the issue started as soon as i made menu fullwidth in customise settings. pls help fix this as i can't find any solution for it online. visit kokomomo dot in
What you described is the typical behavior based on the order of how the parts of the page/code load in Divi. You can ask Elegant Themes support about this though and they will be a much better help than me.
@@PeeAyeCreative yes i got it fixed by a code they provided which made some parts static. but anyways i love your videos and have helped me in many ways.