You might try altering the header when users scroll down your website as one of the many ways to enhance user experience. A separate header is very helpful to drive your users to the header’s material without returning to the top page, especially if you have a news website, an e-commerce website, or a blog website.
This article will show you how to change the header on scroll down in Divi using Theme Builder.
Steps to Change Header on Scroll Down in Divi Using Theme Builder
Step 1: Create or Edit a Header Template
On your WordPress dashboard, navigate to Divi -> Theme Builder. In the Theme Builder page, create a new header template or edit an existing one by clicking the Add Global Header button or selecting the template you want to modify.
Once you enter the Header Template editor, create two header sections. So, if you’ve already made one header section, add one more with a different design.
Next, add the custom CSS ID to the header you want to display on scroll down. On your Section Settings, navigate to the Advanced tab -> CSS ID & Classes. Afterward, add “fixed-header
” to the CSS ID input field.
Step 2: Add the JavaScript Code
Next, we will add a JavaScript code to the Divi Code module.
Insert the Code module below the Menu module (headers). Once you insert the Code module, copy the JavaScript code below and paste it into the Code input field.
Note: Insert the Code module in the same section as the menu module (header you want to display on scroll down). It aims to avoid the blank space on your Divi website.
<script type="text/javascript"> jQuery( document ).ready(function() { var header_fixed = jQuery("#fixed-header") jQuery( header_fixed ).wrap( "<div class='header-f-wrapper'></div>" ); var header_f_wrapper = jQuery (".header-f-wrapper"); var height = jQuery(".et-l--header").height()+(20); jQuery(window).scroll(function(){ if(jQuery(this).scrollTop()>height){ header_f_wrapper.addClass("header-show"); } else{ header_f_wrapper.removeClass("header-show"); } }) }) </script>
Step 3: Add the Custom CSS
Once you add the JavaScript code to the Code module, we will add the custom CSS to your header template.
Go to the Page Settings by clicking the gear button (⚙️) on your Header Template editor. Afterward, navigate to the Advanced tab -> Custom CSS. Once you enter the Custom CSS section, copy the simple CSS snippet below and paste it into the Custom CSS input field.
.header-f-wrapper { opacity:0; } @media only screen and ( min-width: 480px ) { /* fixed only for deviced > 480px, feel free to change the value */ .header-f-wrapper { z-index: 999; /* display at the top */ position: fixed; width: 90%; top: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .header-f-wrapper.header-show { opacity:1; }} @media only screen and ( min-width: 782px ) { .admin-bar #fixed-header{ top: 32px; }}
Note: In this example, we set the width at 90%. Feel free to adjust the width value on the CSS snippet above to fit your website appearance.
That’s it. After adding the custom CSS, click the Save Changes button on the Theme Builder page to apply the modifications.
Now, when you scroll down on your Divi website, the header should change its appearance based on the settings you’ve just applied.
The Bottom Line
This article demonstrates how simple it is to modify the header in Divi by utilizing the Divi Theme Builder. Changing the header on the scroll is a typical strategy that can improve user experience, produce an aesthetically appealing website, and facilitate navigation.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.