How to Create a Fixed Header with Divi’s Position Options

How to Create a Fixed Header with Divi’s Position Options

With Divi’s new position options, turning your header into a fixed one is easier than ever. With just a few clicks, you can turn your static custom-built header into a fixed one that follows your visitors throughout their stay on your website. In this tutorial, we’ll show you the general steps you need to follow to create your fixed Divi header. This is the order we’ll follow:

  1. Go to the Divi Theme Builder & start building the global header
  2. Once inside the global header template, use one single section with multiple rows to create the header with all needed elements
  3. Use Divi’s built-in section position options to make the entire section stay fixed to the top
  4. Create a custom body template and add some top margin to create container space for the fixed Divi header
  5. Save all Divi Theme Builder changes and view the outcome on your website

You’ll able to download the default website template’s 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

fixed divi header

Download The Global Website Template for FREE

To lay your hands on the free global website 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. Once there, click on ‘Add Global Header’.

fixed divi header

Build Global Header

And start building the header from scratch by selecting ‘Build Global 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