Creating an Auto-Hiding Header

Aug 13, 2016

In one of our recent Divi Child Theme projects we needed to create an auto-hiding header.  Out of the box Divi has some built in animation effect for the header, but we needed to have our header slide smoothly up and out of the view-port when scrolling down and then smoothly back into view when the user began to scroll up.  This proved to be a bit of a challenge because several of our earliest attempted solutions conflicted with some of Divi’s built in CSS and jQuery functions.  This article will explain the solution that we settled on to solve this challenge.

First we disabled the fixed header in Divi => Theme Options => General

ThemeOptionsCapture

Next we added a little CSS to the Custom CSS box at the bottom of Divi => Theme Options => General

CustomCSS

Now you might ask why we disabled the fixed header only to give a position of fixed again in the CSS code and here’s why.   By default the #main-header is not fixed but with fixed header enabled in the Divi Options Panel a jQuery functions adds a class of et_fixed_header when scrolling down.  This was causing some conflicts with what we were trying to accomplish.  Disabling fixed header and then setting #main_header to position: fixed made things a bit more predictable.  Now we simply handled the animation with some jQuery in Divi => Theme Options => Integration.  We adding our code to the box labeled “Add code to the < body > (good for tracking codes such as google analytics)”.

IntegrationjQuery

And here is a video clip of this Auto-Hiding Header in action.

Cheers!

-JD