Search

How to Hide Header on Scroll Down in Divi Builder

Divi Builder allows you to create a custom header for your WordPress site regardless of the theme you use. You can create a beautiful header to your liking, but in the end, content remains the most important part of a website. To provide a great user experience (UX) to your readers, you can create a header that automatically disappears on scroll down and shows up again on scroll up.

This practice offers a great UX to readers as they can get focused on the article they are reading. When a visitor visits your website using a device with a smaller screen (such as a smartphone or tablet), this practice becomes even more helpful.

Divi Builder also allows you to create a custom single post layout so that you can create a content-focused single post layout on your WordPress site.

How to Hide Header on Scroll Down in Divi Builder

You need to add a JavaScript and CSS code to the section of your header to automatically hide the header on scroll down and show it up again on scroll up.

First off, go to Divi Theme Builder (Divi -> Theme Builder) and edit an existing header by clicking the pencil icon.

Editing the body of a custom header template.

Open the section settings panel. You can use the Layers View feature to ease your job. Click the gear icon to open the section settings panel.

Using the Layers View feature to jump between elements within the Divi Builder editor.

On the section settings panel, go to the Advanced tab and open the CSS IS & Classes block and add stickyheaders on the CSS ID field.

Adding a CSS ID to the header section.

Still on the Advanced tab, open the Position block and set the position to Fixed.

Setting the position to fixed.

Next, add the Code module to any column on any row inside the section. In this example, we add the Code module to the second column.

Adding the Code module to the header template.

Paste the following code to the Text block under the Content tab on the Code module settings panel.

<script>

jQuery(document).ready(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
{
$('#stickyheaders').addClass('headerup');
}
else
{
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
});
});
</script>


<style>
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
</style>
The code content.

Click the Save button on the bottom-right corner to save the changes you made and click the X button to exit the Divi Builder visual editor.

Clicking the X code will exit the Divi Builder editor.

If nothing happens, try to click the Save Changes button on the Divi Theme Builder page.

The final step is to click the Save Changes button to apply the changes.
This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.