5 steps to make
the Divi Header Cooler

• Set the Header style to centered mode;
• A child theme with inside the header.php file;
• The Divi Widget Builder plugin by SJ James Divi.space;
• A bit of creativity and a bit of patience to grammar mistakes you’ll find in this article ?

First you have to set the header layout centered, then with CSS code move the logo and menu on the left.

To set the Centered layout go to Theme Customizer > Header & Navigation > Header Format > Header Style.

Social Icons for Menu

In the demo you will have seen that I have added icons for social networks, to add them I used Font Awesome you just add to your menu as shown in the screenshot you can see below. But beware, if you want to place on the right of the menu you add custom class: social_header.

Great, the first step is completed!

Maybe you already use a child theme, perhaps one of those available in my store, or perhaps not, but for this tutorial I strongly suggest you to use one and not necessarily a child theme premium but also a neutral child theme that allows you to add customizations to your site without worrying about compromising the main theme. I will not tell you about the benefits of using a child theme, but if you want to know more you can read this excellent article:

The In’s & Out’s of Child Themes & Premium Divi Child Themes

That’s enough talk and we go to practice…

To create a child theme you can use these two excellent tools:

1. DIVI CHILD THEME BUILDER
2. DIVI CHILD THEME MAKER

to automatically create a child theme, but both do not automatically create the header.php, essential for this tutorial, so after you’ve generated your child theme, look and open the parent folder of the Divi theme, here you will find the header.php file that you must copy and paste into your new child theme folder.

That done, you will need to copy the file to the child theme folder you created previously, in this way you will have successfully created your first child theme :).

Now open the header.php file with your favorite editor, and around line 217 you should see the text </a> which is the closing of the tag that allows you to add your logo to the header, under this tag you must add this line of code:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('widget_header_custom') ) : endif; ?>

Great, the first step is completed!

as shown in this screenshot:

The hardest part is over, now from here on and all downhill fact what we now need to do is just use the Divi Builder to create a section with items you want to display in your header and save it in the library, because we need this next step.

I’ll give you some examples: Want to show your contacts and a button with a call to action? Well, then it creates a section in three columns and add two blurb for contacts and a button for the call to action.

Want another idea? Take the case where you’ve created an offer with a deadline, you can add a module text with a short description, a countdown module and a button.

As you see, nothing you do not already know :).

Tip: when you create your section keep in mind that you will have a small space for the items and must all be on the same line, then you should not use module as a Contact Form, Tabs, Accordion etc …

Another tip is to set padding:0; on both the section and also on the row, as shown in this screenshot:

Now you will need to download and install Divi Widget Builder, a free plugin (NOTE: when I wrote this tutorial the plugin was free now it costs $7 for single site.) developed by SJ James Divi Space really very useful and smart, because it allows you to turn any item stored in the library in a widget, and it’s just fantastic.

After installation you will need to activate the plugin and go to Widgets page (Appearance > Widgets), here you will find a new Widget called “Divi PB Widget”.

The next step is to create a new widget area and guess where will the new widget area? That’s right, the header.

Create a new widget area is easy, you just have to give a name to the new area in this box:

Usually you can give any name to the new Widget Area, but for this tutorial we will call widget_header_custom, then you will need to give this name to the new area. If you paid attention, you’ll notice that it is the same name used in the header.php file to bring up the new widget area. After you must click on the Create button and the new widget area will be displayed at the top.

Note: if you do not immediately see the new widget area, you just have to do a page refresh.

You Should now see a new widget on your screen area, now you need to do a drag and drop and add the widget “DIVI PB WIDGET” within the new area widget.

Now download the template that I created for you and import the JSON file in your library.

DOWNLOAD TEMPLATE

After importing the template, return to the widget area you created earlier and select from the drop-down menu the layout / item Header-Custom-CTA.

Uncheck the “Display Library Item Title?” and then click on save. We’re almost there, just missing the last step, the CSS code.

STEP 5: Add CSS Code

We’re almost there, just missing the last step, the CSS code.

Now go into the Divi options panel or in your child theme of the style.css file, copy and paste the code found below.

Of course, this code allows you to operate the specific layout shown in the demo, so if you create a new layout will probably have to customize this code.

@media only screen and (min-width: 981px) {
/**** Logo and Menu Left ****/
  .logo_container {
    text-align: left !important;
    margin: 0 5%;
  }
  #et-top-navigation {
    text-align: left !important;
  }
 /**** Header ****/
  #top-menu-nav {
    margin: 0 5%;
  }
  .et_header_style_centered #main-header .container {
    width: 100% !important;
    max-width: 100% !important;
  }
  /**** Header Centered Border ****/
  .et_header_style_centered #main-header div#et-top-navigation {
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
 /**** Header Centered Link Padding ****/
  .et_header_style_centered #top-menu > li > a {
    padding-bottom: 1.5em;
    padding-top: 1.5em !important;
  }
  /**** Position adjustment icon drop-down menu ****/
  #top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {
    line-height: 3.4em !important;
  }
  #main-header {
    -webkit-box-shadow: none !important;
    box-shadow: none  !important;
  }
  /**** Adjustment Bar Search ****/
  #et_top_search {
    position: absolute;
    top: 30px;
    right: 5%;
  }
  span.et_close_search_field {
    right: 5%;
  }
  .et-search-form input {
    right: 5%;
    width: 46%;
  }
  /**** Divi Widget ****/
  #divi_pb_widget-8 {   /**** <---- Replace the final number with that of your widget ****/
    float: none !important;
    width: 60%;
    position: absolute;
    top: 20%;
    right: 0;
  }
  /**** Row Custom ****/
  .header_custom_cta.et_pb_row {
    position: absolute;
    right: 5%;
  }
}
/**** Position Social Header ****/
@media only screen and (min-width: 981px) and (min-width: 1440px) and (max-width: 1600px) {
  .social_header {
    position: absolute;
    left: 58%;
  }
}

In the CSS code you can see that there is an ID #divi_pb_widget-8 which refers to the widget used for the header. You probably have to change the number you see at the end with one that matches your Widget that you have created, and to do that you have to open the tools to developers, to enable the inspector and find the class .logo_container click on it and then immediately find the ID of your widget with its identification number of which you will need to add in the CSS code.

For all subscribers to the newsletter I reserved 2 Bonus.

The first is a template that allows you to add an optin-form header, the second template adds a secondary menu.

So that’s all. As you see you can now easily create your own custom header, you’ll only have to test your creativity to create your perfect header.

Stay tuned because for the next week I have another tutorial that adds another weapon to your arsenal ?

As always I wait for you in the comments!

Have a nice weekend!

Source Code PHP: David Elster.