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.
- 1 Preview
- 2 Download The Swap Divi Header Template for FREE
- 3 Download For Free
- 4 You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
- 5 1. Go to Divi Theme Builder & Start Building Global Header
-
6
2. Create Both Headers in the Same Section
- 6.1 Modify Section
- 6.2 Add Row Header #1
- 6.3 Add Image Module to Column 1
- 6.4 Add Menu Module to Column 2
- 6.5 Add Social Media Follow Module to Column 3
- 6.6 Add Row Header #2
- 6.7 Add Image Module to Column 1
- 6.8 Clone Menu Module & Place in Column 2 of Row Header #2
- 6.9 Add Button Module to Column 3
- 7 2. Add CSS Classes
- 8 3. Add JQuery & CSS Code
- 9 4. Save Theme Builder Changes & View Outcome
- 10 Preview
- 11 Final Thoughts
Preview
Before we dive into the tutorial, letβs take a quick look at the outcome across different screen sizes.
Desktop
Mobile
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 newsletter 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β.
Build Global Header
Then, click on βBuild Global Headerβ to be redirected to the template editor.
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%
Spacing
Then, go to the spacing settings and remove all default top and bottom padding.
- Top Padding: 0px
- Bottom Padding: 0px
Box Shadow
Weβre using a subtle box shadow as well.
- Box Shadow Vertical Position: 15px
- Shadow Color: rgba(0,0,0,0.06)
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
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:
Background Color
Without adding any modules yet, open the row settings and change the background color.
- Background Color: #000000
Sizing
Modify the sizing settings as well.
- Use Custom Gutter Width: Yes
- Gutter Width: 1
- Width: 100%
- Max Width: 100%
Spacing
Then, go to the spacing settings and remove all default top and bottom padding.
- Top Padding: 0px
- Bottom Padding: 0px
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;
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.
Alignment
Change the moduleβs alignment next.
- Image Alignment: Center
Select Menu
In the second column, the only module we need is a Menu Module. Select a menu of your choice.
Remove Background Color
Remove the moduleβs background color next.
Layout
Move on to the design tab and change the layout accordingly:
- Style: Centered
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
Dropdown Menu Text Settings
Next, weβll change the dropdown menu line color in the dropdown menu text settings.
- Dropdown Menu Line Color: #000000
Icons Settings
Weβre also changing the hamburger menu icon color.
- Hamburger Menu Icon Color: #ffffff
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)
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.
Individual Social Network Background Color
Then, open each social network individually and change the background color to white.
- Background Color: #FFFFFF
Alignment
Go back to the moduleβs general settings and change the module alignment.
- Module Alignment: Center
Icon Settings
Modify the icon color too.
- Icon Color: #0042c9
Border
And complete the module settings by adding some border radius.
- All Corners: 100px
Add Row Header #2
Column Structure
On to the second header! Add a new row using the following column structure:
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%
Spacing
Remove all default top and bottom padding next.
- Top Padding: 0px
- Bottom Padding: 0px
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;
Column 3 Background Color
And complete the row settings by opening the column 3 settings and using a background color.
- Background Color: #0042c9
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.
Alignment
Change the moduleβs image alignment next.
- Image Alignment: Center
Clone the Menu Module that was used in the previous row and place the duplicate in the second rowβs middle column.
Modify Menu Text Settings
Open the duplicate Menu Module and change the menu text color.
- Menu Text Color: #0042c9
Modify Dropdown Menu Text Settings
Modify the dropdown menu text settings too.
- Dropdown Menu Line Color: #ffc21d
Modify Icon Settings
Complete the Menu Module settings by changing the hamburger menu icon color.
- Hamburger Menu Icon Color: #0042c9
Add Copy
In the rowβs last column, the only module we need is a Button Module. Enter some copy of your choice.
Alignment
Modify the button alignment next.
- Button Alignment: Center
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
- Button Font: Roboto
- Button Font Weight: Bold
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)
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
Row Header #1
Then, open the first row header and use the following CSS class:
- CSS Class: header-1
Row Header #2
Open the second row as well. Use the following CSS class for it:
- CSS Class: header-2
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.
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('<div class="header-placeholder"></div>'); 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(); } }); });
Add the following CSS code between style tags as well:
.et_mobile_menu { margin-top: 20px; width: 300%; margin-left: -100%; }
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!
Preview
Now that weβve gone through all the steps, letβs take a final look at the outcome across different screen sizes.
Desktop
Mobile
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.
The problem is that when you touch the hamburger on mobile, the drop-down is completely empty.
I imported the layout from my test site, but I’m unable to replicate the issue on my end: https://prnt.sc/qsD2olnnfGbn
Could you please try the following? Go to Section Settings > Advanced > Visibility, and ensure that both horizontal and vertical overflow settings are set to visible. https://prnt.sc/BhzDoIKdyBSU
my first header has and image under it with a gradient in the background of the row and the code is not putting a space at the top of the page. How do i adjust that?
This is great, but it seems to be super slow and clunky in Safari, but nice and smooth on Chrome. Do you have any suggestions to improve the speed and function in Safari?
Is there a way to make the first header transparent?
Hello.
Thanks for the amazing tutorial.
I had an issue with the first header. Links are not working. They just work when the second headr appears. Can you provide some help?
Best!
Hey, great work. But i have a problem with the header. I imported the json file into the themebuilder and the header works fine on the homepage but it seems that on a woocommerce product page the header falls behind all content when you’re using a divi product layout. When using the standard woocommerce layout it works fine but then the sale button and the product image magnifying glass are seen on top of the header instead of behind it. After some testing it does not seem to be a problem with z-index. I hope you can help.
Greetings, Damian
π
Good to see you’re enjoying the tutorial, Mike! π
Thanks you for this. I’ve used combinations of different themes for my website and these tutorials are great in order to create something unique about our website
Glad to hear that, Eileen! π
Looks really nice ! Thank you Donjete ! π
Always welcome, Paulina! π
Nice! Great post Donjete!
I’m definitely giving this one a try for one of my website projects. I’m taking some programming courses online. I can’t wait to do and understand these types of customization.
Happy to hear that! Best of luck π