How to Create a Custom Divi Header
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 we will be creating in this tutorial, however when you master these skills you can pretty much create anything.
Important: If you do this on an existing website make sure to create a backup before proceeding.
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:
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
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
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.
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.
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.
This header is basically the same concept as from Webly pro but I used some extra CSS for the different background gradient colors.