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.

 

header

 

View Live Demo 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.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest