Divi Quick Tip: How To Hide The Secondary Navigation On Scroll

Divi Quick Tip: How To Hide The Secondary Navigation On Scroll

The CSS snippet below gives you more control over Divi’s “fixed navigation” option. Out of the box the primary and secondary menu will both remain visible upon scroll.

By including this CSS to your child theme’s style.css or ePanel, the primary menu will continue to remain visible upon scroll, but the secondary will hide, creating a cool effect and allowing for more space for your website’s body content.

*Please note: You must have fixed navigation enabled in the ePanel for this to work. Also, please make sure you are logged out of your WordPress site when testing how this looks on the front end.

.et_fixed_nav #top-header { position: absolute !important; } .et-fixed-header { top: 0px!important; }

 

 

See The Before and After Results Below:

Before CSS

After CSS

Cory Jenkins

I am an Avid WordPress User/Developer/Blogger since 2007 and Co-Founder of WP Zone. When I am not working on awesome WordPress and Divi stuff, I enjoy hanging out with my family, watching baseball and exploring the great outdoors in our RV.