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.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!