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

February 8, 2020

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

how-to-create-a-fixed-header-with-divis-position-options How to Create a Fixed Header with Divi’s Position Options

Mobile

how-to-create-a-fixed-header-with-divis-position-options-1 How to Create a Fixed Header with Divi’s Position Options

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’.

how-to-create-a-fixed-header-with-divis-position-options How to Create a Fixed Header with Divi’s Position Options

Build Global Header

And start building the header from scratch by selecting ‘Build Global Header’.

how-to-create-a-fixed-header-with-divis-position-options-1 How to Create a Fixed Header with Divi’s Position Options

2. Use Regular Section to Build Fullwidth Header

Section Settings

Background Color

Once inside the template editor, you’ll notice a section. Open that section and use a white background color for it.

  • Background Color: #FFFFFF

how-to-create-a-fixed-header-with-divis-position-options-2 How to Create a Fixed Header with Divi’s Position Options

Spacing

Then, move on to the design tab and remove all default top and bottom padding.

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

how-to-create-a-fixed-header-with-divis-position-options-3 How to Create a Fixed Header with Divi’s Position Options

Box Shadow

Add a box shadow too.

  • Box Shadow Blur Strength: 50px
  • Shadow Color: rgba(0,0,0,0.12)

how-to-create-a-fixed-header-with-divis-position-options-4 How to Create a Fixed Header with Divi’s Position Options

Add Row #1

Column Structure

Continue by adding a new row to the section using the following column structure:

how-to-create-a-fixed-header-with-divis-position-options-5 How to Create a Fixed Header with Divi’s Position Options

Background Color

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

  • Background Color: #ff3314

how-to-create-a-fixed-header-with-divis-position-options-6 How to Create a Fixed Header with Divi’s Position Options

Sizing

Then, move on to the row’s design tab and modify the sizing settings as follows:

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

how-to-create-a-fixed-header-with-divis-position-options-7 How to Create a Fixed Header with Divi’s Position Options

Spacing

Remove all default top and bottom padding too.

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

how-to-create-a-fixed-header-with-divis-position-options-8 How to Create a Fixed Header with Divi’s Position Options

Add Social Media Follow Module to Column 1

Add Social Networks of Choice

The only module we need in the row is a Social Media Follow Module. Add the social networks of your choice.

how-to-create-a-fixed-header-with-divis-position-options-9 How to Create a Fixed Header with Divi’s Position Options

Reset Item Styles for Each Social Network Individually

Continue by resetting the item styles for each social network individually.

how-to-create-a-fixed-header-with-divis-position-options-10 How to Create a Fixed Header with Divi’s Position Options

Alignment

Then, go the module’s design tab and change the module alignment.

  • Module Alignment: Center

how-to-create-a-fixed-header-with-divis-position-options-11 How to Create a Fixed Header with Divi’s Position Options

Icon Settings

Modify the icon color next.

  • Icon Color: #ffc600

how-to-create-a-fixed-header-with-divis-position-options-12 How to Create a Fixed Header with Divi’s Position Options

Spacing

And complete the module’s settings by adding some top margin.

  • Top Margin: 0.5vw

how-to-create-a-fixed-header-with-divis-position-options-13 How to Create a Fixed Header with Divi’s Position Options

Add Row #2

Column Structure

On to the next row! Use the following column structure:

how-to-create-a-fixed-header-with-divis-position-options-14 How to Create a Fixed Header with Divi’s Position Options

Sizing

Without adding any modules yet, open the row settings and allow the row to take up the entire section’s width.

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

how-to-create-a-fixed-header-with-divis-position-options-15 How to Create a Fixed Header with Divi’s Position Options

Spacing

Remove all default top and bottom padding too.

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

how-to-create-a-fixed-header-with-divis-position-options-16 How to Create a Fixed Header with Divi’s Position Options

Main Element

And to make sure all column content appears next to each other on smaller screen sizes, we’ll add one line of CSS code to the row’s main element.

display: flex;

how-to-create-a-fixed-header-with-divis-position-options-17 How to Create a Fixed Header with Divi’s Position Options

Column 1 Border

And complete the row settings by opening the column 1 settings and adding a right border.

  • Right Border Width: 2px
  • Right Border Color: #ffc600

how-to-create-a-fixed-header-with-divis-position-options-18 How to Create a Fixed Header with Divi’s Position Options

Add Image Module to Column 1

Upload Logo

Time to start adding modules. In column 1, the only module we need is an Image Module. Upload your logo.

how-to-create-a-fixed-header-with-divis-position-options-19 How to Create a Fixed Header with Divi’s Position Options

Alignment

Then, go to the module’s design tab and change the image alignment.

  • Image Alignment: Center

how-to-create-a-fixed-header-with-divis-position-options-20 How to Create a Fixed Header with Divi’s Position Options

Sizing

Modify the width across different screen sizes next.

  • Width: 50px (Desktop), 30px (Tablet & Phone)

how-to-create-a-fixed-header-with-divis-position-options-21 How to Create a Fixed Header with Divi’s Position Options

Spacing

And complete the module’s settings by adding some custom top and bottom margin across different screen sizes.

  • Show Space Below The Image: No
  • Top Margin: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)
  • Bottom Margin: 1vw (Desktop), 2vw (Tablet), 3vw (Phone)

how-to-create-a-fixed-header-with-divis-position-options-22 How to Create a Fixed Header with Divi’s Position Options

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.

how-to-create-a-fixed-header-with-divis-position-options-23 How to Create a Fixed Header with Divi’s Position Options

Remove Background Color

Then, remove the module’s background color.

how-to-create-a-fixed-header-with-divis-position-options-24 How to Create a Fixed Header with Divi’s Position Options

Layout

Move on to the module’s design tab and change the layout settings.

  • Style: Centered
  • Dropdown Menu Direction: Downwards

how-to-create-a-fixed-header-with-divis-position-options-25 How to Create a Fixed Header with Divi’s Position Options

Menu Text Settings

Modify the menu text settings too.

  • Menu Font: PT Serif
  • Menu Text Color: #333333
  • Menu Text Size: 18px

how-to-create-a-fixed-header-with-divis-position-options-26 How to Create a Fixed Header with Divi’s Position Options

Dropdown Menu Text Settings

Along with the dropdown menu text settings.

  • Dropdown Menu Background Color: #ffffff
  • Dropdown Menu Line Color: #ffc600

how-to-create-a-fixed-header-with-divis-position-options-27 How to Create a Fixed Header with Divi’s Position Options

Icons

We’re changing the hamburger menu icon color in the icons settings next.

  • Hamburger Menu Icon Color: #ff3314

how-to-create-a-fixed-header-with-divis-position-options-28 How to Create a Fixed Header with Divi’s Position Options

Spacing

And we’ll complete the module’s settings by adding some custom margin values across different screen sizes.

  • Top Margin: 1.4vw (Desktop), 2.5vw (Tablet), 3vw (Phone)
  • Bottom Margin: 1.4vw (Desktop), 2.5vw (Tablet), 3vw (Phone)

how-to-create-a-fixed-header-with-divis-position-options-29 How to Create a Fixed Header with Divi’s Position Options

Add Code Module to Column 2

Insert Mobile CSS Code

To modify the dropdown menu on mobile (allow it to take up the entire width of the screen), we’ll need a few lines of CSS code. We’ll add this CSS code to a new Code Module right below the Menu Module.

<style> .et_mobile_menu { margin-top: 5%; width: 210%; margin-left: -110%; } </style>

how-to-create-a-fixed-header-with-divis-position-options-30 How to Create a Fixed Header with Divi’s Position Options

3. Use Divi’s Position Options to Stick Section to Top

Change Section Position Settings

Once you’ve completed the overall look and feel of your custom header, it’s time to turn it into a fixed one! To do that, open the section settings and change the position settings as follows:

  • Position: Fixed
  • Location: Top Center

If you want to have some space between the section and the top of your page, you can use the vertical offset option. Or, if your header isn’t appearing on top of all page content across your website, you can increase the z index.

how-to-create-a-fixed-header-with-divis-position-options-31 How to Create a Fixed Header with Divi’s Position Options

4. Add Top White Space for Header

Build Global Body

The next step to this tutorial will allow you to add some top ‘container space’ for your header. As soon as you turn an element fixed, the element’s container floats on your page without taking up any additional space. If you, however, don’t want it to overlap some existing page or post content, you can add some space for the container at the top. To do that, start building the global body of your default website’s template.

how-to-create-a-fixed-header-with-divis-position-options-32 How to Create a Fixed Header with Divi’s Position Options

Section Settings

Spacing

Once inside the template editor, you’ll notice a section. Open that section and remove all default top and bottom padding.

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

how-to-create-a-fixed-header-with-divis-position-options-33 How to Create a Fixed Header with Divi’s Position Options

Add New Row

Column Structure

Continue by adding a new row using the following column structure:

how-to-create-a-fixed-header-with-divis-position-options-34 How to Create a Fixed Header with Divi’s Position Options

Sizing

Open the row settings and allow the row to take up the entire section’s width.

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

how-to-create-a-fixed-header-with-divis-position-options-35 How to Create a Fixed Header with Divi’s Position Options

Spacing

Remove the default top and bottom padding next.

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

how-to-create-a-fixed-header-with-divis-position-options-36 How to Create a Fixed Header with Divi’s Position Options

Add Post Content Module to Column

And to allow all dynamic content to show up, depending on the post or page visitors are on, we’ll use the Post Content Module.

how-to-create-a-fixed-header-with-divis-position-options-37 How to Create a Fixed Header with Divi’s Position Options

Add Top Margin to Section to Make Place for Header

Last but not least, to create that top space for the fixed Divi header, we’ll open the section settings again and add some top margin. You can adjust this value as you please.

  • Top Margin: 150px

how-to-create-a-fixed-header-with-divis-position-options-38 How to Create a Fixed Header with Divi’s Position Options

4. Save Theme Builder Changes

Once you’ve completed both the global header and global body, you can save all Theme Builder changes and view the outcome on your website!

how-to-create-a-fixed-header-with-divis-position-options-39 How to Create a Fixed Header with Divi’s Position Options

Preview

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

Desktop

how-to-create-a-fixed-header-with-divis-position-options How to Create a Fixed Header with Divi’s Position Options

Mobile

how-to-create-a-fixed-header-with-divis-position-options-1 How to Create a Fixed Header with Divi’s Position Options

Final Thoughts

In this post, we’ve shown you how to create a fixed Divi header with the new position options that you get inside the Divi Builder itself. We’ve covered the necessary steps to accomplish a top fixed header and you can apply this technique to any kind of website you’re building. You were able to download the default website’s template 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.


Source

Share this article:
 

eHost managed wordpress hosting

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

How to Stack and Animate Text using Divi Scroll Effects

How to Stack and Animate Text using Divi Scroll Effects

Using Divi’s scroll effects to stack and animate text on scroll is a unique design technique that can be used to bring life to your page headings. The trick is to use Divi’s position options to stack letters absolutely so that they sit directly on top of each other....

How to Hire a Virtual Assistant for Your Business

How to Hire a Virtual Assistant for Your Business

Busy professionals can always use more hours in their day, and deciding to hire a virtual assistant (VA) is one of the best and most recommended ways to create that time. VAs provide just about every type of support service you can think of that can be performed...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.