When Divi’s Fixed Header option is enabled, the top header and the main header remain fixed at the top of the screen as you scroll down the page. But sometimes that takes up too much screen real estate.
So this nifty little snippet will allow the Main Header to scroll up over the Top Header hiding it until you scroll back up to the top of the page.
Let’s Get Started
1. This first thing we need to do is reduce the z-index of the top header so that it sits behind the main menu when it scrolls up.
2. And to prevent the main menu from “jumping” to the top on the scroll, the second rule will give it a little animation so that it eases upwards when you scroll down.
3. And that last rule tells the main menu to move to the top of the page over the top header when in Fixed Header Mode.
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)
/* hide top header on scroll by Geno Quiroz */
#top-header {
z-index: 9;}
#main-header{
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;}
#main-header.et-fixed-header {
top: 0 !important;}
Notes
You can adjust the top header height, main header height and the fixed header height in the customizer settings. You may make some adjustments to the fixed header height if the top header is still peeking through after you scroll.
This is not perfect and there may be some other methods out there that work better. And if you have one please feel free to share. But for a quick and easily solution, this surely does the trick.
Have fun!
Well that’s all for now. I hope you find this article useful.
Geno, this tutorial is awesome, as always!
A bit off topic, but I’m wondering how did you make this gif image with page scroll?
Hey Geno, that’s great tip! I was actually looking for such solution for the Extra theme. Does it work with with it, as well?
We haven’t tested in with Extra. If you do, let us know how it goes!
Many thanks for this one!
Worked like a charm. Thanks!
Hello geno,
thanks for your tutorial.
I tried this it works great!
I have a question? How do I remove the blank space if you use Show Scroll Down Button?
Thank you
Hmmm…I’m not sure. Can you provide a link to the site for us to see what is happening?
Like this css code Geno … But how can I hide the top header completely on mobile?
This should do the trick…
@media only screen and (max-width : 980px) { #top-header { display: none;}}Every time the page refreshes the main header scrolls down a tiny bit. Is it possible to let the main header not scroll down on refresh?
If the main header is the transparent, This will not work, as we are changing the z-index only. Any suggestions on hiding instead of changing the z-index.
Since this was such a popular tutorial, Elegant Themes added this feature to Divi. When editing a page/post you will see a new purple box on the right. One of the options is to hide the Divi Header until scroll.
Adding this will hide the top header on scroll when main header goes up using the z-index
#top-header.et-fixed-header
{
visibility:hidden;
}
Hello again, I wonder how to hide both, the top menu and the main menu on scroll down and show them again on scroll up? Any tips? Thanks 🙂
I think in this case it would be best just to turn off the fixed header. That way both section go up and disappear as you scroll down. Go to Divi > Theme Option and Disable the “Fixed Navigation Bar”
I’ve made my primary menu transparent on scroll, so the secondary menu is visible under the primary menu on scroll. Is there a way to make it not visible under the primary menu after scroll. Thanks, great tutorials as alway!
Unfortunately I do not have a simple solution at the moment.
Hi, this works great but one problem I’m having with it is that if you have a single page scrolling website Divi doesn’t quite scroll all of the way to the anchor point because it still thinks that the top bar is there.
So if you have a top bar 36px tall, Divi will scroll down to 36px above your anchor point when you click the link. Do you know of any way to fix this?
See: http://dev2.stikky.com.au/
Looks like you got it resolved BIlly. Looks great.
Hi Geno, great tutorial! I’m currently working on a development site and implemented your code. The hiding of top header works great but as I scroll back up, it shows a white background color just under the primary menu for fraction of seconds till I reach the very top and menu expands to normal size. Any solutions to that?
screenshot: http://tinypic.com/r/350otqr/9
You probably need to adjust the padding or margin on one of the elements. I would need a link to see where it is.
Hi Geno,
Is there a way to tweak the code to have the bottom header disappear on scroll and leave the top header?
Thanks!
Thank you Geno.. it works!
Thank you very much for this article. These sharing are very useful for my blog.
What about hiding main header and leaving the top head sticky on top
Yes that can be done. Will need to play around with the code and write up a new tutorial though.
Hello, I have the same problem on a single page. Can you share how you fixed this? Thanks!
hello, thank you for all your tutorials, this one works fine, but when i add this code, the scroll down button of full with header does not work anymore. any idea ??
do you have a link?
Hi bro, I wanna hide my main header, the process is equals like this?
You can either turn off the fixed header in the Divi Theme options or hide the main header all together in the Customizer settings
That works very nicely. Thanks.
perfect!
Dude! You are a rockstar! It just worked like magic! :)))
Thank you Quiroz. Your Posts always help me lot. Keep up the awesome work..