How to Create a Custom Divi Header

by | May 23, 2019 | Divi tutorials | 18 comments

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

Divi library pop up

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.

Custom header ID number

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.

populate the section

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

Add CSS ID

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 ID number

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.

header first look

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.

populating the custom header

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.

Mobile view

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.

Visibility custom header

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:

New header 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

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

Maveros header

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.

Webly pro header

Easyfix

Easyfix header

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.

18 Comments

  1. Ireneusz Pawlik

    Great job! Is there any way to make it hide on scroll or it’s too much? 🙂

    Reply
  2. Athar

    I have been waiting for such a tutorial for so long. Thank you so much!!!!!

    Reply
  3. Tom Steenhuysen

    Elegantly done, Mark!

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

    Reply
  4. Vijayan Chetty

    I was waiting for this lesson for so long. Thank you.

    Reply
  5. William

    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?

    Reply
    • Mark

      Hi William,

      unfortunately I don’t have a quick fix for that.

      Reply
  6. Ken

    Will definitely have to give this a go. Thanks for the tutorial.

    Reply
  7. Diana Hanna

    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?

    Reply
    • Mark

      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

      Reply
      • Diana Hanna

        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.

        Reply
  8. Anders Tøttrup

    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? 🙂

    Reply
    • Mark

      You can place a fullwidth menu module in the custom header and assign it to your third menu.

      Reply
  9. James Adams

    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

    Reply
    • James Adams

      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.

      Reply
    • Mark

      Do you have an URL then I can take a look

      Reply
  10. Ants

    Seems great, but what if I want to add the layout on top of the secondary menu? This places it between both menus…

    Reply
  11. Jason Urso

    This was super helpful for our team. Thanks Mark!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

close
Lifetime access to all Divi child themes and plugins
132 Shares
Share130
Tweet
Pin2
Buffer