This is one of the most requested topics that I get and today it’s here, how to create a custom Divi header.
In this tutorial you will be learning how you can insert a section layout above Divi’s main header. In this section you can place any Divi module which gives you endless design options.
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.
Update: this tutorial is updated for Divi 4.0+ which include the Theme Builder. If you are still using an older version of Divi you can still create a custom header, scroll down to the section Create a custom Divi header before 4.0VIEW DEMO
Create a custom Divi header with the theme builder
Step 1: Download and import the header layout
You can download the files here.
After downloading unpack the folder, inside you will find the json file that you can import in 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 off 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
You have now created a custom header with 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.
In the demo I used a little bit of CSS to give the menu items more space. If you want that as well you can place this snippet in Divi > Theme Options > CSS
.et_pb_menu .et-menu>li {
padding-left: 25px;
padding-right: 25px;
}Congratulations you have created a custom Divi header. If you have any questions leave a reply in the comments below.
Create a custom Divi header before 4.0
If you are using an older version of Divi before 4.0 than you can follow this part of the tutorial to build a custom header.
Important: If you do this on an existing website make sure to create a backup before proceeding.VIEW DEMO
Step 1: Create the custom header section
Go to Divi > Divi Library
Click on “Add New” you now will get this popup
In the layout name field, you can give your custom header any name you want.
Set the Layout Type to: Layout
If you get the options how you want to start then choose “Build from scratch”
When you are back to the builder you need to take a look at the URL in your browser.
Write down the number after post=
In my case this is the number 6 but it will be a different number for you, this can also be a 2,3,4 or more digits number.
You can populate this section quickly just as an example, we will make it better in a later step.
For now, I have created a 4-column structure within each column a text module with the word test in it.
We are going to give this section CSS ID. Open the section (blue bar) and go to the advanced tab > CSS ID & Classes in the CSS ID field fill in this ID top-header
Don’t’ forget to publish/update your section.
Step 2: Creating the hook
In this step we are creating a hook for our just created custom Divi header section. We will be placing this hook in our child themes functions.php file. If you don’t have a child theme then you need to create one first. Here you will find a step by step guide on how you can create a Divi child theme.
If you have your child theme uploaded and activated then go to Appearance > Theme Editor
Go to your functions.php file (on the right side)
Place the following PHP code in your child theme functions.php file:
function custom_header ( $main_header ) {
$custom_header .= do_shortcode('[et_pb_section global_module="6"][/et_pb_section]');
return $custom_header . $main_header;
}
add_filter( 'et_html_main_header', 'custom_header' );
Replace the ID number with yours.
Hit save and go to the front end. You should now see your custom header section above Divi’s main header.
If you don’t see this section then go back to Divi > Divi Library > your created section and hit update again, if you have any caching plugins you need to clear those caches + your browser cache.
We have now placed a custom header section above Divi’s main header in the next step we are going to make this a better-looking header.
Step 3: Building the custom Divi header
We are now going to populate our new header. Go to Divi > Divi Library and open your custom header.
In the first column I will be placing the social media follow module. In the second column I placed a blurb module. In the third column I placed a button module and in the last column a text module.
I removed the top and bottom padding from the section and I decreased the top and bottom padding from the row to 9px top and 7px bottom.
To change the background color, go to Divi > Theme Customizer > Header & Navigation > Secondary Menu Bar > Background color
I also have a tutorial on how to add icons in your Divi menu
Make it mobile friendly
On the front-end this custom header does have some align issues on mobile devices. There is also a lot of content above the menu now and for mobile this is sometimes not what you want.
You can solve this by editing each module with the mobile options (unfortunate for alignment there are no mobile options), by using CSS code or to duplicate this row and hide it for desktop and use a single column structure for tablets and mobile. The last method is what I will be doing.
This is what I did:
I duplicated the 4-column row.
I then changed the visibility options of the top row by checking the phone and tablet options in Row settings > Advanced tab > Visibility
For the bottom row I set those settings by only checking the desktop. So now the top row is only visible on desktop and the bottom row is only visible for tablet and mobile phone.
I then changed the column structure of the bottom row to a single column and I removed the social media + blurb module. If you still want these then you can change the alignment in the settings. I removed those so there is not so much content above the menu bar. I played a little bit with the margins to make it all a bit tighter.
This is the end result on mobile:
Step 4: The CSS
The only CSS we need for our custom Divi header is to hide it from the visual builder. The header looks clunky and big when the visual builder is activated so it is better to just hide it. Place this cSS snippet in you child theme CSS file or in Divi > Theme Options > CSS
.et-fb #top-header {
display: none !important;
}
And that is it, you are now be able to create a custom Divi header. You can follow my other tutorials on header design. If you want the same menu as in the demo you can follow the tutorial how to style the Divi menu.
Some header examples
When you master these skills, you can create some really nice header designs. Take a look at some custom Divi headers that I have created.
Maveros
This header is further customized then the header in this tutorial. I have used CSS to align the logo left of the top header and menu bar.
Webly pro
In this header design I have hidden the original Divi header with CSS and created a top section with a fullwidth menu module below that section. The logo is just created with an image module.
Easyfix
This header is basically the same concept as from Webly pro but I used some extra CSS for the different background gradient colors.
I hope you liked this tutorial. If you want more tutorials check out all my Divi tutorials here.