Your header inevitably remains one of your website’s most important elements. It influences your visitors’ navigation process and allows them to find what they’re looking for in a heartbeat. Now, if you’re looking for a way to swap your Divi header on scroll with another one, you’re going to enjoy this post. We’ll show you exactly how to pull it off with Divi’s theme builder, built-in elements and some additional code. We’re also making sure there’s some auto-generated placeholder space for the header at the top of your page. You’ll be able to download the JSON file for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

swap divi header

Mobile

swap divi header

Download The Swap Divi Header Template for FREE

To lay your hands on the free swap Divi header template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

1. Go to Divi Theme Builder & Start Building Global Header

Go to Divi Theme Builder

Start by going to the Divi Theme Builder in the backend of your WordPress website and click on ‘Add Global Header’.

swap divi header

Build Global Header

Then, click on ‘Build Global Header’ to be redirected to the template editor.

swap divi header

2. Create Both Headers in the Same Section

Modify Section

Sizing

Once inside the template editor, you’ll notice a section. Open the section settings and make sure the section width is ‘100%’.

  • Width: 100%

swap divi header

Spacing

Then, go to the spacing settings and remove all default top and bottom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

swap divi header

Box Shadow

We’re using a subtle box shadow as well.

  • Box Shadow Vertical Position: 15px
  • Shadow Color: rgba(0,0,0,0.06)

swap divi header

Position

Last but not least, we’ll make the section stick to the top center of our page using the position settings in the advanced tab.

  • Position: Fixed
  • Location: Top Center

swap divi header

Add Row Header #1

Column Structure

Both headers we’ll create will be part of the same section. We’ll use a separate row for each header. Add the first row header using the following column structure:

swap divi header

Background Color

Without adding any modules yet, open the row settings and change the background color.

  • Background Color: #000000

swap divi header

Sizing

Modify the sizing settings as well.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

swap divi header

Spacing

Then, go to the spacing settings and remove all default top and bottom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

swap divi header

Main Element

Complete the row settings by adding two lines of CSS code to the row’s main element. This CSS code will help us align all column content.

display: flex;
align-items: center;

swap divi header

Add Image Module to Column 1

Upload Image

Time to add modules, starting with an Image Module in column 1. Upload a logo of your choice.

swap divi header

Alignment

Change the module’s alignment next.

  • Image Alignment: Center

swap divi header

Add Menu Module to Column 2

Select Menu

In the second column, the only module we need is a Menu Module. Select a menu of your choice.

swap divi header

Remove Background Color

Remove the module’s background color next.

swap divi header

Layout

Move on to the design tab and change the layout accordingly:

  • Style: Centered

swap divi header

Menu Text Settings

Then, make some changes to the menu text settings.

  • Menu Font: Roboto
  • Menu Font Weight: Bold
  • Menu Text Color: #ffffff (Desktop), #000000 (Tablet & Phone)
  • Menu Text Size: 18px

swap divi header

Dropdown Menu Text Settings

Next, we’ll change the dropdown menu line color in the dropdown menu text settings.

  • Dropdown Menu Line Color: #000000

swap divi header

Icons Settings

We’re also changing the hamburger menu icon color.

  • Hamburger Menu Icon Color: #ffffff

swap divi header

Spacing

Complete the module settings by adding some custom left and right padding on smaller screen sizes.

  • Left Padding: 30px (Tablet & Phone Only)
  • Right Padding: 30px (Tablet & Phone Only)

swap divi header

Add Social Media Follow Module to Column 3

Add Social Networks of Choice

In the last column, the only module we need is a Social Media Follow Module. Add the social networks of your choice.

swap divi header

Individual Social Network Background Color

Then, open each social network individually and change the background color to white.

  • Background Color: #FFFFFF

swap divi header

swap divi header

Alignment

Go back to the module’s general settings and change the module alignment.

  • Module Alignment: Center

swap divi header

Icon Settings

Modify the icon color too.

  • Icon Color: #0042c9

swap divi header

Border

And complete the module settings by adding some border radius.

  • All Corners: 100px

swap divi header

Add Row Header #2

Column Structure

On to the second header! Add a new row using the following column structure:

swap divi header

Sizing

Without adding any modules yet, open the row settings and change the sizing settings as follows:

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes
  • Width: 100%
  • Max Width: 100%

swap divi header

Spacing

Remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

swap divi header

Main Element

Then, align all column content by using two lines of CSS code in the row’s main element.

display: flex;
align-items: center;

swap divi header

Column 3 Background Color

And complete the row settings by opening the column 3 settings and using a background color.

  • Background Color: #0042c9

swap divi header

Add Image Module to Column 1

Upload Image

In column 1, the only module we need is an Image Module. Upload a logo of your choice.

swap divi header

Alignment

Change the module’s image alignment next.

  • Image Alignment: Center

swap divi header

Clone Menu Module & Place in Column 2 of Row Header #2

Clone the Menu Module that was used in the previous row and place the duplicate in the second row’s middle column.

swap divi header

Modify Menu Text Settings

Open the duplicate Menu Module and change the menu text color.

  • Menu Text Color: #0042c9

swap divi header

Modify Dropdown Menu Text Settings

Modify the dropdown menu text settings too.

  • Dropdown Menu Line Color: #ffc21d

swap divi header

Modify Icon Settings

Complete the Menu Module settings by changing the hamburger menu icon color.

  • Hamburger Menu Icon Color: #0042c9

swap divi header

Add Button Module to Column 3

Add Copy

In the row’s last column, the only module we need is a Button Module. Enter some copy of your choice.

swap divi header

Alignment

Modify the button alignment next.

  • Button Alignment: Center

swap divi header

Button Settings

Then, style the button as follows:

  • Use Custom Styles For Button: Yes
  • Button Text Size: 20px (Desktop), 18px (Tablet), 15px (Phone)
  • Button Text Color: #ffffff
  • Button Border Width: 0px

swap divi header

  • Button Font: Roboto
  • Button Font Weight: Bold

swap divi header

Spacing

And complete the module settings by adding some custom padding across different screen sizes.

  • Top Padding: 33px (Desktop), 35px (Tablet), 38px (Phone)
  • Bottom Padding: 33px (Desktop), 35px (Tablet), 38px (Phone)

swap divi header

2. Add CSS Classes

Section

Once you’ve added and styled all modules, it’s time to add the CSS classes which we’ll use inside our JQuery code. First, open the section settings and use the following CSS class:

  • CSS Class: header-section

swap divi header

Row Header #1

Then, open the first row header and use the following CSS class:

  • CSS Class: header-1

swap divi header

Row Header #2

Open the second row as well. Use the following CSS class for it:

  • CSS Class: header-2

swap divi header

3. Add JQuery & CSS Code

Add Code Module to First Row’s Third Column

Once all CSS classes are in place, it’s time to add the code. Add a new Code Module wherever you want inside your section. We’re placing it in the first row’s third column.

swap divi header

Add JQuery Code (Between Script Tags)

Then, add the following lines of CSS code between script tags as you can see in the print screen below:

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('
'); var headerWrap = $('.header-placeholder'); var headerHeight = firstHeader.outerHeight(); headerWrap.css('height', headerHeight); secondHeader.hide(); $(window).scroll(function() { var topPosition = $(window).scrollTop(); if (topPosition >= 400) { firstHeader.slideUp(); secondHeader.slideDown(); } if (topPosition == 0) { secondHeader.slideUp(); firstHeader.slideDown(); } }); });

swap divi header

Add CSS Code (Between Style Tags)

Add the following CSS code between style tags as well:

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

swap divi header

4. Save Theme Builder Changes & View Outcome

At this point, the only thing left to do is save all theme builder changes and view the outcome on your website!

swap divi header

swap divi header

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

swap divi header

Mobile

swap divi header

Final Thoughts

In this post, we’ve shown you how to swap your Divi header for another one on scroll using Divi’s theme builder, the Divi elements and some additional JQuery and CSS code. We’ve also auto-generated some space at the top of the page container that prevents the fixed header from overlapping the page content. You were able to download the swap Divi header template JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.


LEAVE A REPLY

Please enter your comment!
Please enter your name here