How to Swap Your Divi Header for Another One on Scroll

How to Swap Your Divi Header for Another One on Scroll

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

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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

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

[…]

 



This article was written by Donjete Vuniqi and originally published on Elegant Themes Blog.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top