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
- How to create a custom global Divi header (FREE DOWNLOAD)
- Customize your header further with these tutorials
- Divi header layout packs
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.
Then go to the import tab and upload the JSON file Custom Divi Header.json
Step 2: Create a global Divi header
Go to Divi > Theme Builder and click on “Add Global 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.
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
- How to create a sticky Divi header
- How to create a Divi menu
- How to create a Divi mega menu
- How to style and adjust the width of the dropdown menu in Divi
- How to create a call to action button in the menu
- How to hide the Divi header
- How to add social icons in the Divi header
- How to style the Divi mobile menu
- How to change the mobile menu breakpoint
- How to add the text “Menu” next to the Divi hamburger menu
- How to create a collapsing mobile menu in Divi
How to create a transparent Divi 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.
How to create a sticky Divi 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.
How to create a 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.
How to create a 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.
How to style and adjust the width of the dropdown menu in Divi
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.
How to create a call to action button in the menu
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.
How to hide the Divi header
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.
How to add social icons in 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.
How to style the Divi mobile menu module
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.
How to change the mobile menu 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.
How to add the text “Menu” next to the Divi hamburger menu
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.
How to create a collapsing mobile menu in Divi
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.
Divi header layout packs
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.
Conclusion
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.
Great job! Is there any way to make it hide on scroll or it’s too much? 🙂
I have been waiting for such a tutorial for so long. Thank you so much!!!!!
Elegantly done, Mark!
Thank you for sharing this. I look forward to implementing some of this in future client projects.
I was waiting for this lesson for so long. Thank you.
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?
Hi William,
unfortunately I don’t have a quick fix for that.
Will definitely have to give this a go. Thanks for the tutorial.
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.
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? 🙂
You can place a fullwidth menu module in the custom header and assign it to your third menu.
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.
Do you have an URL then I can take a look
Seems great, but what if I want to add the layout on top of the secondary menu? This places it between both menus…
You can try with a different hook. On the Elegant Themes website you will find all the hooks avalaible: https://www.elegantthemes.com/documentation/developers/hooks/divi-template-hooks/
This was super helpful for our team. Thanks Mark!
Thanks for this simple and useful tutorial. I’m using Divi over a year and I love it.
Great tutorial, at last I have created a different header for a Divi website, freedom to design. Thank You!