Source: https://divicake.com/blog/increase-the-width-of-the-divi-header-on-scroll/ [Blog](https://divicake.com/blog/)/[Blogging](https://divicake.com/category/blogging/) # How to Increase the Width of the Divi Header on Scroll By Divi Cake·11 May 2024·Updated 9 July 2024·4 min read To expand the width of the Divi header as you scroll down the page, creating a sleek and smooth transition effect. We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Adding CSS Code to the Default Divi Header](https://divicake.com#adding-css-code-to-the-default-divi-header) - [Adding CSS Code to the Header Built Using The Theme Builder](https://divicake.com#adding-css-code-to-the-header-built-using-the-theme-builder) - [Wrapping Up:](https://divicake.com#wrapping-up) In this tutorial, we will explore how to create a dynamic transition effect for the [Divi](https://divicake.com/go/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](https://divicake.com/blog/wordpress-tutorial/) Dashboard, go to Divi, then Theme Options, and finally add the provided code to the [Custom CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) 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%; } Simply navigate to your WordPress Dashboard, go to Divi, then Theme Options, and finally add the provided code to the Custom CSS section. 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](https://divicake.com/blog/adding-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,](https://divicake.com/blog/divi-theme-builder-overview/) 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](https://divicake.com/blog/divi-sticky-header-guide/). 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. Assigning a unique CSS ID to the section is a straightforward process in Divi, and it will allow you to make targeted 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. You can effectively integrate jQuery code into your Divi theme settings to enhance functionality or customize your site’s behavior as needed. Adding the JQuery Code to the Divi Dashboard Read More: [What are the Divi Breakpoints and Media Queries](https://divicake.com/blog/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%; } You can easily add custom CSS to your Divi theme settings to modify the appearance and styling of various elements on your website. 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](https://divicake.com/blog/add-divi-button-modules-side-by-side/) About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Blogging [ Selling Divi websites and child themes Blogging10 min read ### How to Make Money Selling Divi Websites and Child Themes How to earn from Divi three ways: building sites for clients, selling finished websites through a brokerage or marketplace, and packaging child themes for sale. 29 September 2026](https://divicake.com/blog/selling-divi-websites-and-child-themes/) [ Top reasons to choose a pre-built theme for your website Blogging10 min read ### Top Reasons to Choose a Pre Built Theme for Your Website Why a pre-built theme is often the faster and cheaper way to launch a site, compared with a custom build on cost, responsiveness, customization, SEO and support. 21 September 2026](https://divicake.com/blog/reasons-to-choose-a-pre-built-theme-for-your-website/) [ Why Web Designers Use Divi Theme to Build Better Websites Blogging7 min read ### Why Web Designers Use Divi Theme to Build Better Websites Design agencies pick Divi for its visual builder, reusable layout packs, and faster client handoff. Here is what Divi for web designers changes day to day. 14 April 2026](https://divicake.com/blog/why-web-designers-use-divi/)