How to Create a Custom Global Header with Divi’s Theme Builder

Posted on October 24, 2019 by in Divi Resources | 61 comments

How to Create a Custom Global Header with Divi’s Theme Builder

Now that the Theme Builder is here, we can’t wait to dive into new tutorials that’ll help you set up your website from A to Z. This includes creating custom headers using Divi’s built-in option. In this tutorial, we’ll focus on creating a global header using Divi’s Theme Builder. A global header will show up everywhere on your website unless you’ve assigned a different header to that page or post.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

global header

Mobile

global header

Download The Custom Header Design for FREE

To lay your hands on the free custom global header design, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Subscribe To Our Youtube Channel

1. Setup Your Primary Menu

Start by creating your menu in the appearance settings of your WordPress website.

global header

2. Go to the Theme Builder Options

Then, navigate to the Theme Builder in Divi’s Theme Options. Once there, you’ll notice an empty default website template.

global header

3. Add & Build Global Header

The default website template is where you can start creating your custom global header, global body and global footer. Click on ‘Add Global Header’ and continue by clicking on ‘Build Global Header’ to get started with the process.

global header

Section Settings

Sizing

Open the section you can notice on the page, move on to the design tab and change the width across different screen sizes.

  • Width: 100%
  • Max Width: 1280px (Desktop), 100% (Tablet & Phone)

global header

Spacing

Remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

global header

Border

Add some border radius to the bottom left and right corners of the section next.

  • Bottom Left: 50px
  • Bottom Right: 50px

global header

Box Shadow

We’re also adding a subtle box shadow.

  • Box Shadow Blur Strength: 60px
  • Shadow Color: rgba(0,0,0,0.13)

global header

Visibility

Then, go to the advanced tab and hide the overflows. Increase the z index too, this will help ensure that the section remains on top of all page content.

  • Horizontal Overflow: Visible
  • Vertical Overflow: Visible
  • Z Index: 99999

global header

4. Dedicate New Row to Header

Now that we’ve completed the general section settings, we can start adding rows. In total, we’ll need two rows; one that’s dedicated to the header, and one that allows the menu items to show up. We’ll start with the header by adding a new row using the following column structure:

global header

Row Settings

Background Color

Without adding any modules to the row, open the row settings and change the background color.

  • Background Color: #38383f

global header

Sizing

Modify the row’s sizing settings next.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

global header

Display

And make sure the columns appear next to each other on smaller screen sizes as well by adding one single line of CSS code to the row’s main element.

display: flex;

global header

Add Image Module to Column 1

Upload Logo

Once you’ve completed the row settings, it’s time to start adding modules. Add an Image Module to column 1 and upload your logo.

global header

Alignment

Move on to the design tab and make sure you’re using left image alignment.

  • Image Alignment: Left

global header

Sizing

Modify the module’s width too.

  • Width: 100px

global header

Spacing

And add some custom margin values across different screen sizes.

  • Top Margin: 5px
  • Left Margin: 50px (Desktop), 20px (Tablet & Phone)

global header

Add Social Media Follow Module to Column 2

Add Social Networks

On to the second column. There, we’ll need a Social Media Follow Module. Add the social networks of your choice.

global header

Social Network Background Color

Then, open each social network individually and change the background color into a completely transparent one.

  • Background Color: rgba(0,0,0,0)

global header

Alignment

Go back to the module’s normal settings and change the entire module alignment next.

  • Module Alignment: Center

global header

Icon

Modify the icon settings too.

  • Icon Color: #ffffff
  • Use Custom Icon Size: Yes
  • Icon Font Size: 16px (Desktop & Tablet), 12px (Phone)

global header

Spacing

And add some top margin.

  • Top Margin: 10px

global header

Add Button Module to Column 3

Add Copy

Move on to the third column and add a Button Module with some copy of your choice.

global header

Alignment

Change the button alignment in the design tab.

  • Button Alignment: Right

global header

Button Settings

Style the button settings accordingly:

  • Use Custom Styles For Button: Yes
  • Button Text Size: 12px (Desktop), 10px (Tablet), 8px (Phone)
  • Button Text Color: #ffffff
  • Button Background Color: #ffae25
  • Button Border Width: 0px

global header

  • Button Border Radius: 0px
  • Button Letter Spacing: 5px (Desktop), 3px (Tablet & Phone)
  • Button Font: Open Sans
  • Button Font Weight: Bold
  • Button Font Style: Uppercase

global header

Spacing

And add some custom padding values across different screen sizes.

  • Top Padding: 20px
  • Bottom Padding: 20px
  • Left Padding: 50px (Desktop & Tablet), 15px (Phone)
  • Right Padding: 50px (Desktop & Tablet), 15px (Phone)

global header

5. Dedicate New Row to Menu Bar

Once you’ve completed the row that’s dedicated to the global header, you can add another row right below it using the following column structure:

global header

Row Settings

Sizing

Without adding any modules yet, open the row settings and change the sizing settings in the design tab.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100%

global header

Spacing

Remove all default top and bottom padding next.

  • Top Padding: 0px
  • Bottom Padding: 0px

global header

Add Menu Module to Column

Select Menu

Then, add a Menu Module to the column and select the menu you’ve created in the first part of this tutorial.

global header

Layout

Move on to the design tab and change the layout settings as follows:

  • Style: Centered
  • Dropdown Menu Direction: Downwards

global header

Links

Modify the active link color in the design tab too.

  • Active Link Color: #ffae25

global header

Dropdown Menu

Do the same for the dropdown menu line color in the dropdown menu settings.

  • Dropdown Menu Line Color: #ffae25

global header

Icons

Modify the hamburger menu icon color next.

  • Hamburger Menu Icon Color: #ffae25

global header

Menu Text

Along with the menu text settings.

  • Menu Font: Prata
  • Menu Text Color: #000000

global header

6. Make Header & Menu Bar Stick to Top

Open Section Settings

Once you’ve completed the second row, the only thing left to do is make the section stick to the top of our pages and posts. To do that, we’ll open the section settings again.

global header

Add Custom CSS to Main Element

Then, we’ll go to the advanced tab and we’ll add a few lines of CSS code to the section’s main element.

position: fixed;
top: 0;
left: 0;
right: 0;

global header

7. Save Global Header & Theme Builder Options

Once you’ve completed the entire global header design, make sure you save the design before exiting the template layout. Once you’re outside of the template layout, save the changes of your entire theme builder and you’re done!

global header

global header

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

custom header

Mobile

custom header

Final Thoughts

In this post, we’ve shown you how to create a custom global header with Divi’s new Theme Builder. This tutorial goes to show how easy it is to create beautiful headers and apply them to your entire website or specific custom post types. We hope this tutorial inspires you to get started with the Theme Builder right away! If you have any question or suggestions, make sure you leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

Premade Layouts

Check Out These Related Posts

61 Comments

  1. I failed to import the custom template .json file into divi builder.

    I’ve tried added in via Divi Library, as well as Theme Builder > Global header > Build Global Header > Start from scratch > Portbility > import .json file.

    The error pops out :
    This file should not be imported in this context.

    Any help is appreciated!

    • ..just try Theme Builder – Portability (on the right side upper corner) – Import. That’s it.

      • I get the same problem.
        Tried the Divi Library and the Theme Builder, but keep getting the same error:
        This file should not be imported in this context.

        Other layout (.json) files import fine but this one dose not.
        Any ideas?

  2. How can the site’s title and/ or tagline (by default configured here: /wp-admin/options-general.php) be added to a custom (global) header withOUT having to code PHP (in a child theme e.g.)? I would expect with some (?) shortcode and Divi’s code module: https://www.elegantthemes.com/documentation/divi/code/

    • Use the dynamic content button. For instance, when selecting a text module, hover over the input area and you’ll see the “server/3 disk” icon (not sure what it’s actually called…) appear in the top right. Click it and you have a bunch of options including Site Title and Site Tagline.

      • ?

      • I would also like to know ?

  3. In the native Divi header “et-fixed-header” is dynamically added to #main-header when you scroll down the page. How do you duplicate these on scroll styles when you are using a global header?

    • Exactly!
      I think it should exist an option to import core menu to theme builder on-the-fly, because is a pain in the a** the need to create another menu, or even better, just an option to use core menu on those new templates.
      Cheers

      • +1!
        I was advised to use the theme builder to create archive and search results pages to match my theme. I was really relieved to find this solution, until I discovered that I have to create a header/menu to match the core theme menu. It’s impossible to match the existing styles – I’ve got custom code for mobile break points and all sorts. I just want to use this menu in the theme builder!

  4. I noticed at the end your header was glitching when ever you hovered over the white end of the menu, the radius corners would revert back to squares instead of rounded. I tested this on my testing site and confirmed it does it to mine as well. Is there a solution so that it does not glitch when the mouse hovers over the menu?

    • Thats not a glitch, It is how it is designed. To change it you can got Sections Settings->Advanced Tab->Horizontal Overflow-> Hover->Select “Hidden” (you might have selected visible during design)

      Do the same for Vertical Overflow. I was facing the same issue and this is how I corrected.

    • In the directions above they have it listed under Hover Visibility. To change the section’s overflows on hover to visible. Just change that to hidden and you’re all set.

      • I built mine according to the directions and have the same problem as David. I’ve tried setting Hover visibility to hidden, but it still does not work properly. Also I have one drop-down menu, and if the setting is “hidden”, the drop-down menu items are behind the main content.

        • Same issue here…

  5. How to change height and background-color of sticky menu when user scrolling down. This is standard function in normal header of divi (also on this page)

    • Yes, I am also looking for an answer to this. I like the idea of customising a new global header, because the core ones are too basic. But many sites would benefit from a smaller, more compact menu on scroll

  6. Thanks for the step by step tutorial. Glad to be a family of Divi.

  7. As David says,… this glitching is in almost every builder template you guys bring out these days. You use a photo of a guy, that is round. But it starts as a square and the you see it building up the round edges. This i really annoying, and not so professional looking. It seems elements are first build and, after a while, styled. It should be element > styled > build.
    CAN YOU PLEASE FIX THAT?
    It’s also in this menu, as David says.
    I’m not used to this happening at Divi updates.

    Furthermore, I see a lot of people requesting like Slawek, to have the ability to use ‘standard’ Divi features of headers that shrink when scrolling down, or other features we are used to of Divi prior to 4.0…

  8. Seems like this works only for fresh and empty theme builder. When I try to import I get a bunch of questions – but either way, after import nothing happens. The theme builder concept works only with empty content?

    This import contains references to the global Header, Body, and/or Footer from the website they were exported from. How would you like to import these references?

    Relink them to this website’s global Header, Body, and/or Footer.

    Import them as static layouts from the website they were exported from. This may take several minutes depending on the number of references being imported.

    Right now I do not get it how the whole concept works besides the missing features for header menu….
    I did ask for clarification to the support, but seems they do not know either or just keep asking for removing plugins..

  9. Very nice. Thank you.

  10. When I apply the fixed element

    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    the main content goes up and hide behind the menu, any idea how to fix that?
    Thank you

    • I’m having the same issue. When you apply the fixed position and adjust the visibility settings, the section that contains the global header covers up the beginning portion of my main page content (mainly because of the 999 setting for z-index, I think).

      Elegant Themes team, how can this be corrected so all main content can be viewed and not covered up by the global header? Thanks for the help!

    • Hi There,

      Just had the same issue I think. You are talking about the WP admin bar yes? A quick fix would be to add the class custom-sticky-header to the section you’ve just built. Then add the following into the Divi custom CSS section or child theme stylesheet (not the header section you’ve just built)
      .admin-bar .custom-sticky-header {
      top: 32px;
      }

      • Thanks but that helps only if you are edditing the page. After going live my header is hiding the the top of my content on the page.

        • I see, that sounds like a different issue as this code is designed to work whilst editing, hence the admin-bar selector. Try adding some padding to the main section you’ve built the header in?

    • My workaround:

      Divi>Theme Options>General>CSS personalizado
      #et-main-area {
      margin-top: 83px !important; /* Put here whatever your header height is */
      }

      Theme Options > Integration > Add code to the

      jQuery(function($){
      if ($(‘#wpadminbar’).length > 0) {
      $(‘.et_pb_section_0_tb_header’).css(‘top’, ’32px’);
      }
      });

  11. I built a Global Header under the Default Website Template, but it’s not showing up on any pages, even though it’s visible. Is there a setting to ‘enable’ this? I thought just by adding it I would see it on my pages.

    • The same thing is happening to me. Did you ever get this figured out?

    • Not sure if this is what you’re struggling with but f you’re building a fixed header, you’ll have to make sure your global header section’s z index is high enough so it overlaps the page content. I usually assign a ‘99999’ z index.

  12. Any plans on adding the ability to have menus right-aligned? Surprised this isn’t an option out the box, especially when the default header menu in divi itself is right aligned.

    • If you right align the menu text under the design tab that should get you the default menu look.

  13. Why are Divi custom template .json files difficult to import?

    Is there a way Divi can sort out the problem of importing custom template .json file into Divi Builder, especially when you introduce a new feature?
    Typical examples: Custom Global Header, Custom Footer.

    Error message: “This file should not be imported in this context”

    It’s annoying to keep seeing this error message in spite of using several different options or approaches in one’s attempt to import either at backstage or front end, e.g.: Import & Export, Portability, etc.; and even if you create a blank new page.

    Is there something we are missing or doing wrong?

    What’s the use, after all the lengthy explanations one can’t simply import a custom template .json file into Divi Builder and use it.

    Please simplify the process or function to import the .jason files!

  14. I hope more footers will be available soon, such as how we can download site templates.

  15. Anyone knows how to prevent in mobile view the layout from overlapping with the main home image? Otherwise it looks great

  16. In the section “Hover Visibility” you have a Hover setting. Even though I have the latest version of Divi and builder there is no hover setting box.

    Is this why the drop down menu doesn’t show on tablet and mobile?

    Link to screen shot of No Hover setting
    https://drive.google.com/open?id=1ZxXtH2bpf-sbWmuRmwJb2yEApRdTE17r

  17. There seems to be a common problem, first of all is the position of the main body starts below the header and the most irritating is that when in mobile, clicking the “hamburger” the drop down menu goes below the main body.

    • For the disappearing “hamburger” drop down menu problem, from this tutorial. In the section settings>advanced>visibility change both vert and horiz overflow to visible for tablet and mobile.

      • I did that, still not displaying the menu correctly. Did anyone find another fix?

  18. Is it possible to build a custom header without losing my menus? I have a mega menu that does not look right when added to a custom header.

    Thanks

    • As soon as you start building a custom header, you’re entirely getting rid of the old one. But we’ll soon create a tutorial on how to build a mega menu with Divi’s theme builder so keep an eye on the blog! 🙂

  19. I’m using polylang to make my website multilanguage. how can I change logo and tagline when I change the language?

  20. This is getting really frustrating . . .
    I’ve been TRYING to build a custom header using the Theme Builder and every time I try to insert/use the “Social Media Follow” module within one of the columns in the row, it disappears – GONE. I’ve tried several times – clearing cache – same result.

    Any idea WHY this is happening? Is this a glitch? I didn’t change any particular settings. And it’s ONLY the “Social Media Follow” module that’s doing this.

  21. I followed the instructions and built header, but now I can’t get it off the site. I deleted the template it was on, where I had added it to all the pages. I then deleted the global header template and it is still on the site. The header is the only thing I have on the site so far. Do I need to reset all templates?

    • When you’re using a global header in different templates and you delete the global header in your default website template, the global header will transform into a custom header. You’ll need to delete the custom header in each template if that’s the case.

  22. Hi, beautiful layout but could I with some simple css say that should only work on mobile? And for desk top the standard one kicks in? Love your work! Thank you.

    • Happy to hear you like the design! 🙂

      You can use Divi’s built-in responsive content to modify the modules across different screen sizes. Or you can use different sections for the headers you build and hide them in the visibility settings. We’ll definitely handle this in upcoming tutorials!

  23. Exciting!! Not able to figure out how can we do a fixed header at the top with a transparent background. Any thoughts?

    • Working on a tutorial that’ll handle this, keep an eye on the blog! 🙂

  24. This is my solution to the menu appearing at the top normally, but leaving room for the wp admin bar at the top when logged into WordPress.

    Add a code module somewhere in the first section of the template header. In that code module, add the following code:

    Put a script tag here (seem to not be able to do this directly as it invokes an Elegant Themes security protection
    jQuery(function($){
    if ($(‘#wpadminbar’).length > 0) {
    $(‘.et_pb_section_0_tb_header’).css(‘top’, ’32px’);
    }
    });
    Put a closing script tag here

    With this, the header will take the setting (presumably top: 0px) if the user is not logged in and the admin bar is not present. If there is an admin bar, top is changed to 32px to leave room at the very top for the wp admin bar.

  25. Hi everyone,
    very nice tutorial !
    is it possible to hide the custom header when no scrolling, like in basics divi settings ?
    Thanks

  26. Many nice ideas – but too much missing. No good solutions for sticky header. The menu now aligned left and no right align. Why?
    Its great how you are working to make it more adjustable and comfortable, but don´t just skip the functions which already worked well.

  27. another problem : with my custom header, the side point navigation bar has disappeard… But it’s checked on the pages…
    What can I do ? I love this point navigation ! 🙂
    Thank you for your very helpfull tutorials !

  28. So I tried out the new header, but it is pretty buggy. When I disable it/delete it though, the old divi header doesn’t show up anymore, so at this point I’m pretty much trapped.

    Any way to bring back the old divi header?

    • Just had the same issue when testing it out, to solve it go to the theme builder menu in the DIVI section and where you added the new header click the EYE icon so it doesnt show anymore, your old menu settings will now return …… hope this helps

  29. Tried doing this with Divi Extra. Madea great header but the content from the Extra category builder pages dont display properly beneath this header ( top items in any content layout and sidebar widget are lost beneath header. Have tried adding some top / bottom margin space, on header and Category layout section setings but doesn’t solve problem. Has anyone else tried this, and if so have a solution?

  30. I have tried to upload the .json file in every conceivable way, but I just keep getting the “this can not be loaded in this context error. I have tried to import it to the Library, the page on standard builder, the page on visual builder and also the theme builder. Where am I going wrong?

  31. Totally useless tutorial. I’m asked to download a design. But I’m not told what to do with it then. As a result, having gone through all the steps, I get nothing. That is: the preview shows the menu I’ve created, but it does not show up when I look at the real thing. First suspicion arose when I was unable, unlike the tutor, to get to “edit layout template” – instead I got something like “edit global header layout”.

  32. Hello and thanks for this tutorial. I have a problem with the hamburger menu. The menu don’t works. when I click on it the menu don´t dropdown. How can I resolve this problem?

    Thanks

  33. I tried making a header and then it didn’t work out the way I planned. I turned it off and even tried deleting it but the original wordpress header is not coming back. Is there some button I need to hit to bring back the pre-Divi 4.0 header-WordPress header?

    Thanks,

    Line

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest