How to Hide Header on Scroll Down in Divi Builder

Header is a vital element of a website as it is the most visible part of a website. 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.

If you haven’t created a custom header with Divi Builder before, you can read our previous article. We will go straight to adding the JavaScript and the CSS code in this article.

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

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.

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.

Still on the Advanced tab, open the Position block and set 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.

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>

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.

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

This page may contain affiliate links, which help support WP Pagebuilders.

Subscribe to our newsletter

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This