In this tutorial, we will explore how to create a dynamic transition effect for the Divi Header. Specifically, we’ll show you how to expand the width of the Divi Header as you scroll down the page, creating a sleek and smooth transition effect. This enhancement not only adds a touch of elegance to your website but also improves the overall user experience. By following our step-by-step guide, you’ll learn how to implement this feature effortlessly, making your website more engaging and visually appealing.

Adding CSS Code to the Default Divi Header

Enhancing the default Divi Header to increase its width on scroll is quite straightforward. Simply navigate to your WordPress Dashboard, go to Divi, then Theme Options, and finally add the provided code to the Custom CSS section.

.container.clearfix.et_menu_container {
    -webkit-transition:1s;
    -o-transition:1s;
    transition:1s;
    -webkit-transition-timing-function:ease;
         -o-transition-timing-function:ease;
            transition-timing-function:ease;
}
 
.et-fixed-header .container.clearfix.et_menu_container {
    width:90%;
    max-width:100%;
}

Adding CSS Code to the Divi Dashboard

And that’s it—we’re all set! If you want to extend the duration of the transition effect, you can easily do so by changing the 1s value in the code. For example, if you want the transition to take longer, you could increase it to 2s or 3s, depending on your preference. This simple adjustment allows you to customize the smoothness and timing of your header’s expansion, ensuring it matches the overall feel of your website.

Read More: How to add a Call To Action Button to Divi Menu

Adding CSS Code to the Header Built Using The Theme Builder

If you’re using a header created with the Divi Theme Builder, the code mentioned earlier won’t function as expected. To achieve the same effect for a custom header, you’ll need to follow a few additional steps. If your header, which is built using the Theme Builder, isn’t already fixed in its position, you can refer to a tutorial on how to make your custom Divi header fixed or sticky.

First, open the settings for the section where your menu is located. Then, go to Section Settings > Advanced > Custom CSS ID & Classes > CSS ID. In the CSS ID field, enter “dc-main-header” and save the settings. This step assigns a unique identifier to the section containing your menu, which we’ll use for making adjustments later.

Adding a CSS ID to the section

After adding the CSS ID to the Section go to your WordPress Dashboard > Divi > Theme Options > Integration > Add code to the < head > of your blog and add the following code.

<script>
jQuery(function($){
$(function() {
    //caches a jQuery object containing the header element
    var header = $("#dc-main-header");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
 
        if (scroll >= 100) {
            header.addClass("et-fixed-header");
        } else {
            header.removeClass("et-fixed-header");
        }
    });
});
}); 
</script>

Adding the JQuery Code to the Divi Dashboard

Read More: What are the Divi Breakpoints and Media Queries

Once you’ve inserted the jQuery code mentioned earlier, proceed by adding the following CSS code in your WordPress Dashboard under Divi > Theme Options > Custom CSS section. This allows you to customize the appearance of your website’s header as per your preferences.

#dc-main-header .et_pb_row {
    -webkit-transition:1s;
    -o-transition:1s;
    transition:1s;
    -webkit-transition-timing-function:ease;
         -o-transition-timing-function:ease;
            transition-timing-function:ease;
}
 
#dc-main-header.et-fixed-header .et_pb_row {
    width:90%;
    max-width:100%;
}

Adding the CSS Code to the Divi Dashboard

The code you’ve just added will function properly on both a Standard Section that includes a regular Row and also on a Full Width Section that contains a Fullwidth Menu Module.

Wrapping Up:

In this tutorial, we’ve covered how to enhance your Divi Header by implementing a dynamic width expansion effect as users scroll down your website. This feature not only adds elegance but also enhances user experience significantly.

By following the steps outlined, you can effortlessly integrate this effect into your website. Whether you’re modifying the default Divi Header or a custom one built with the Theme Builder, the process is straightforward. Simply add the provided CSS and jQuery code to achieve a smooth transition in header width upon scrolling.

Remember, you have the flexibility to adjust the duration and smoothness of the transition by modifying the CSS transition duration values. This customization ensures your header’s expansion aligns perfectly with your site’s design and usability goals.

Implementing these enhancements will make your website more engaging and visually appealing, providing visitors with a seamless browsing experience. Experiment with these techniques to see how they can elevate the overall look and feel of your Divi-powered website.

Read More: How to Add Divi Button Modules Side by Side