[Limited Time Offer] Get 40% off MEMBERSHIP PLUS before it's gone! 👉Get This Deal
Mark Hendriksen Logo

How to Create a Custom Divi Header

Mark Hendriksen | May 3, 2023 | 20 Comments
Disclosure Note: Sometimes, I include links in my articles that can earn me money. It won't cost you anything, but it helps me pay for coffee ☕ so I can make more helpful content.

Are you looking to create a unique Divi header? 

With this tutorial on how to create a global header, you can easily create and customize your own custom Divi headers. Learn how to utilize the power of the Divi Builder and its modules for web design and customization.

You’ll learn how to craft a beautiful, responsive header that will engage users from their very first visit. Plus, I’ll teach you tips on making sure your site looks great no matter what device it’s being viewed on. 

Table of Contents

Update: this tutorial is updated for Divi 4.0+ which includes the Theme Builder.

How to create a custom global Divi header

I have created a demo custom header and this is the header we will be creating in this tutorial, however, when you master these skills you can pretty much create any kind of header.

Step 1: Download and import the header layout

You can download the header file here.

After downloading unpack the folder, you will find the JSON file that you can import into the Divi library.

Go to Divi > Divi Library and click on the import/export function.

step 1 import the custom Divi header

Then go to the import tab and upload the JSON file Custom Divi Header.json

Switch to the import tab

Step 2: Create a global Divi header

Go to Divi > Theme Builder and click on “Add Global Header”.

Add the global Divi header

Choose “Build Global Header”.

Click on the plus icon of the section (blue) and go to the tab “Add From Library”

Then click on the Custom Header.

Add the header layout to the global Divi header template

Click on save (right bottom). To leave this screen click on the cross (top left).

Important: Click on Save Changes.

Step 3 Customize the header and menu module

You have now created a custom header with a menu. This means that the Header & Navigation options in Divi > Theme Customizer are gone.

You can make all of your customizations now in Divi > Theme Builder > Global Header.

Place the following CSS code in Divi > Theme Options > CSS or in your Divi child theme if you have one.

@media (min-width: 981px) {
.menu-row {
  display: flex;
  align-items: center;

@media (max-width: 980px) {
.custom-menu.et_pb_menu--style-left_aligned.et_pb_text_align_center .et_pb_menu__wrap {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;

.custom-menu.et_pb_menu .et-menu>li {
    padding-left: 25px;
    padding-right: 25px;

Congratulations you have created a custom Divi header. If you want to customize this header further then the next chapter is for you.

Customize your global header further with these tutorials

If you’re looking to take your Divi header design to the next level, then the following tutorials are a great place to start. Here at my blog, I have tons of helpful header tutorials that provide step-by-step instructions on creating stunning Divi headers.

Check out my full list of header tutorials here:

How to create a transparent Divi header

Transparant header

Creating a transparent Divi header is easy with the default Divi menu – you just need to toggle a button. But if you’ve built a custom global header in the Theme Builder, this option won’t work.

This tutorial will give you 3 solutions: the first 2 are for headers that are made in the Theme Builder, one for non-sticky transparent headers, and the other for sticky ones.

Start with this tutorial

How to create a sticky Divi header

Sticky header

Learn how to make your Divi header sticky in just five minutes, without the need for plugins or custom CSS code. This step-by-step tutorial uses the latest features of Divi’s sticky options, making it easy for anyone to follow.

Start with this tutorial

How to create a Divi menu

Divi menu

In this tutorial, I will show you how to build Divi menus from scratch in a few simple steps using the built-in tools and features of the Divi page builder. I’ll also go into best practices for refining your menu for impact and user experience.

Start with this tutorial

How to create a Divi mega menu

Divi mega menu

Discover how to create truly dynamic navigation for your website with this mega menu tutorial. This simple and intuitive tutorial will take you through every step of the process to create the ultimate Divi mega menu that looks amazing on your website.

Start with this tutorial

How to style and adjust the width of the dropdown menu in Divi

dropdown menu styling

This tutorial is going to show you how to take control and customize your dropdown menus with just a few lines of CSS. I’ll go step-by-step through the process of adjusting styling elements and setting the dropdown menu width.

Start with this tutorial

How to create a call to action button in the menu

Create a CTA button in the Divi header

Creating an effective call to action button with Divi is simple and straightforward. In this tutorial, I’ll take you step by step through the process, so that you can start driving more conversions and engagement with your visitors.

Start with this tutorial

How to hide the Divi header

Hide the Divi header and menu

If you want to hide the header on certain pages for example on a landing page or a checkout page then this is easy to do in Divi. In this tutorial, I’ll show you exactly what to do when it comes to hiding the Divi header.

Start with this tutorial

How to add social icons in the Divi header

Add social icons into the Divi header

Learn how to add social icons such as Facebook, Twitter, or Instagram into the Divi header with this easy-to-follow tutorial. You will also discover two placements for social icons: on the menu and with a custom header design.

Start with this tutorial

How to style the Divi mobile menu module

How to style the Divi mobile menu

Learn how to customize the mobile menu of your Divi website in just a few simple steps. In this tutorial, I’ll walk through how to unlock all of these customization options so that you can create a unique and optimized design for your mobile menu.

Start with this tutorial

How to change the mobile menu breakpoint

Change the Divi header breakpoint

In this tutorial, you will learn how to change the mobile menu breakpoint in Divi. Starting at 980px, the mobile menu breakpoint can sometimes be too early, causing menu items to break down into two lines.

With this tutorial, I’ll show you how to extend it up to 1300px using only a few CSS tweaks.

Start with this tutorial

How to add the text “Menu” next to the Divi hamburger menu

Add the text menu next to the hamburger icon

This tutorial shows how to make the hamburger icon more descriptive by adding the text “Menu” or any text of your choice next to it.

I will walk you through step by step where and how to add text (like “Menu”) next to the classic hamburger icon in Divi themes.

Start with this tutorial

How to create a collapsing mobile menu in Divi

Collapsing mobile menu

In this tutorial, I will guide you in building a collapsible mobile menu that includes nested menu items. If you have many menu items to display, you’ll want to keep your list short. This collapsing mobile menu will make it more user-friendly and efficient.

Start with this tutorial

Divi header layout packs

Header layout pack

If you’re looking for premium Divi header layouts then you can have a look at my Divi header layout pack, available on this site or on Elegant Themes marketplace.

This layout pack comes with 200+ header and navigation layouts.

Simple headers

For beginners, the simple headers offer an ideal starting point. You can customize them straight from the visual builder.

Advanced headers

For advanced Divi users, you can use any of my advanced headers which come with advanced features and mobile styling that will help you catch the eye of your users. By doing so, you would unlock a whole new world of possibilities for an optimized viewing experience!

Headers for WooCommerce

The eCommerce headers are modern and immersive, providing customers with an engaging experience unlike any other.

Headers for square logos

These headers are tailored to fit perfectly with square logos, making it effortless to set up without any need for readjustment.

Fullscreen overlay menu

Enrich your website’s potential with a Fullscreen Overlay Menu – an expansive menu that engulfs every pixel of your screen to create maximum impact. Wow, visitors with this cutting-edge tool elevate user engagement like never before!

Header with a slide-in

Simply hit the hamburger icon and watch your navigation menu appear as if by magic. Say goodbye to needless clicks and unlock instant access to everything you need – all in one, effortless slide.

Header with a mega menu

Get the most out of your website navigation with the Mega Menu header! Tired of complicated and cumbersome menus? The Mega Menu headers simplify the process of navigating around your site, making it easier than ever.


With a few simple steps, you can easily create a custom global Divi header to suit your website’s aesthetics and functional requirements.

From the power of the Divi Builder and its modules to free layout packs, there are so many resources available to help you build great-looking headers.

Don’t forget about all the tutorials that can teach you how to customize your header further. Creating unique headers is a great way to engage users, make sure your site looks good on any device, and make sure it stands out from all the others out there. So start building yours today and let Divi be your guide!

If you have any questions please let me know in the comments below.

You Might Also Like…

Article by

Mark Hendriksen

I am the founder here at MarkHendriksen.com a blog website for Web design, WordPress, and Divi. Learn more about Mark

20 thoughts on “How to Create a Custom Divi Header”

  1. Elegantly done, Mark!

    Thank you for sharing this. I look forward to implementing some of this in future client projects.

  2. Great tutorial, one of my team has followed it found it so useful and easy to follow. Thanks.

    Is there a simple way to make the injected header disappear on scroll so just the fixed header stays?

  3. Thank you Mark! Great tutorial! I did follow your tutorial, and I created as described but it doesn’t place the header above the Divi’s main header, it placed it on the top of the main header. Any Idea what I am doing wrong?

    • Hi Diana,

      Did you placed the ID top-header in the section? It needs to be placed in the ID field not the CSS field

      • Hi Mark,
        Thank you for your help, I do appreciate it.
        Yes, it is placed the ID filed. I can email you images before I place the code and after.

  4. Is there a way to make the custom menu as my 3. menu?
    I already got a Main menu and a top menu, but im trying to make a third menu above the top menu? 🙂

  5. Mark,

    Great tutorial, but for some odd reason I am having issues with this. When I put it in place there is a large gap at the top of the menu so it pushes the entire menu down to about double the size. I have adjusted it and it will not adjust

    • To give a bit more information. When I inspect the page it appears that something is adding 154px padding to the top of the header and then fixing the position of the main header at 262px. I have looked at everything that I can think of and cannot find where this is being added.

  6. Great tutorial, at last I have created a different header for a Divi website, freedom to design. Thank You!


Leave a Comment