Installing Header Layout Pack

Before installing this child theme

  • Check if you met all of the hosting requirements settings under Divi > Support Center

Step 1: download 2 folders

  • Download the folder all-divi-headers-1-5.zip.
  • Download the folder divi-headers-supplementary-files-1-5.zip

Extract both zipped folders

all-divi-headers-1-5: This folder contains one JSON file with all headers

divi-headers-supplementary-files-1-5:  This folder contains all headers separated (so you can just import one header instead of all of them).

Step 2: Importing the headers into the Divi Library

Go to Divi > Divi Library. Click on the import/export options.

Click on Import/export button and switch to the import tab.

If you want to upload all headers at once then choose the file all-divi-headers-1-5.json inside the folder all-divi-headers-1-5.

Note: It is possible that you can not upload all headers at once due to the file size (depending on your upload file settings). In that case, just upload the header from the divi-headers-supplementary-files-1-5 folder.

If you want to upload only one header then go to the folder divi-headers-supplementary-files-1-5. Here you will find all the header folder categories. inside each folder, you will find all the JSON files of each header version.

Use the demo website (https://header-layout-pack.divimarketplace.shop) for header reference. The categories and version numbers correspond with each other.

Step 3 Importing a header in your Theme Builder

In your WordPress dashboard navigate to Divi > Theme Builder.

If you are using a custom global header then open the Global Header.

If you are not using a global Header then click on Add Global header and then Build Global Header > Build From Scratch.

Add your header

1) Click on the + to add a new layout
2) Switch to Your Saved Layouts
3) Choose your header version.

You can use the demo site to see what each header looks like:
https://header-layout-pack.divimarketplace.shop/

The header numbers are corresponding.

Click on save and when you are back in the Theme Builder click on save again.

How to…

Change the logo

This depends on the header you are using.

For some headers, you can do this by opening the menu module and changing the logo in the Logo tab.

For other headers, I have used an image module for the logo and you can upload your own logo from that image module.

Clickable parent link on the mobile submenu

By default, the mobile collapsing menu sub-items can be opened by clicking on the parent link icon and the parent is a link to a page.

If you want to make the entire link to open up the sub-menu then follow these steps:

If you want to make the entire link to open up the sub-menu then follow these steps:

Step 1: Import code module

Import the JSON file “Code – no parent link mobile.json” into your Divi Library.

You can find this file in your divi-headers-supplementary-files-1-5 folder > Code modules

Step 2: Remove the code

  1. Go to Divi > Theme Builder and open your Global Header.
  2. Switch to wireframe view (left-bottom icon).
  3. Open the CSS code module.
  4. Remove the code between the script tags, if there is no code left in the script tags then you can remove both of those as well.

Above those script tags you will see this CSS code:

/* #### Collaping Mobile Menu #### */

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	border-radius: 50%;
	padding: 3px;
}

.et_mobile_menu .menu-item-has-children>a {
    font-weight: 600 !important; 
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon {
	text-align: center;
	opacity: 1;
}

You have to remove all that CSS code.

Note: do not remove the style tag, this tag is below this code.

Step 3: Import the code module

  1. Click on the grey + icon to import a new module.
  2. Switch to the “Add from library” tab.
  3. And choose the Code – no parent link mobile module
Step 4: Add a class to your menu module

  1. Open your menu module
  2. Go to the advanced tab
  3. Under CSS add the class “menu-npl”

If there is already a class in here you can just place it after with a space in between.

Colors

Change the colors

Most of the colors you can change in the modules row and sections.

A couple colors can be changed in the code module.

To find the code module switch to wireframe view

Then open the code module. You will find some CSS code here and you can swap the color codes.

Below is an example of the CSS code for a simple header, this is the same concept for each header.

On the top, you will find the code that affects the colors. You will find this between the comment lines Colors and End Colors.

For this header it means the following:

On line 7 you will find the dropdown menu line color.

On line 12 you will find the dropdown menu arrow color.

On lines 17 and 18 you can change the collapsing mobile menu icon and background color.
Some headers have more colors that can be changed.

I have placed a description in the code module for each color so it is easy to find.

Header with mega menu

General explanation mega menu’s

  • Importing a header with a mega menu is the same as any other header.
  • After importing a header with a mega menu you have to assign a class to the menu item for that mega menu. See assign a mega menu to a menu item.
  • You can only edit the mega menus from the wireframe view.
  • You can remove mega menus but you have to adjust some CSS classes. See remove a mega menu.
  • Remove mega menus in the header that are not being used.

 

Below is a breakdown in the wireframe view of a header with a mega menu.

  • In the header and menu, you will find a CSS code module. This is the CSS code needed for this header.
  • Each mega menu also has its own CSS code module. This CSS code will only affect that particular mega menu.

The mega menu will only show for desktop view. For that reason, I have 2 menu modules (see image, menu desktop, and menu tablet and mobile). So you have to create 2 menus in Appearance > Menus. after that assign each menu to each menu module.

Assign a mega menu to a menu item

Go to Appearance > Menus

Enable CSS Classes by going to screen options (top-right).

For the first mega menu add the following 2 classes to a menu item (can be any menu item):

first-level first-level-1

This are the CSS classes to show up the first mega menu when you hover over that menu item.

For the second mega menu you add the following 2 classes to a menu item:

first-level first-level-2

You notice that only the number 1 changed to 2.

So for your third mega menu, you just copy both CSS classes and change the last number to 3.

And you can do the same for 4 and 5

Create 2 mega menus (desktop and mobile)

As I mentioned before the mega menu only works for desktop. So for mobile and tablet you have to create another menu.

Go to Appearance > Menus

Create a new menu and give it a name. Click on create menu.

Now add your pages to this menu that you want to show for mobile.

Assign the menu

Go to Divi > Theme Builder > Global Header >  Wireframe View

Open the module Menu tablet and mobile. And assign your mobile menu.

Removing a mega menu

You can remove mega menus but you have to adjust some numbers of CSS classes.

Let’s say you only want to use 1 mega menu and that is mega menu 3. You can just delete the other mega menu sections.

Then open the mega menu section that you want to keep and go to the advanced tab. Under CSS classes you will find some classes (see image).

Change the number dropdown-menu-3 into dropdown-menu-1 (Do not change the other numbers in here).

Then go to Appearance > Menus

And give the menu item that you want the mega menu to show the following 2 classes:

first-level first-level-1

A little explanation

  • first-level-1 corresponds with dropdown-menu-1.
  • The first mega menu needs to be first-level-1 otherwise the jquery code will not get executed

Add a mega menu

The demo comes with 5 mega menus. But you can add more if you like too.

For example, you want to have a sixth mega menu.

Then duplicate one of the mega menu sections (in this example I duplicate mega menu version 5).

Open the section of the mega menu and go to the Advanced tab. Under CSS ID & Classes you will see the following:

Change the number of the class dropdown-menu-5 to dropdown-menu-6

Leave the other numbers.

Now go to Appearance > Menus and add the classes to a menu item.

first-level first-level-6

dropdown-menu-6 will correspond with the class first-level first-level-6

And now you have a sixth mega menu that you can customize.

If you want to have another one then do the same steps but change the number to 7

Adjust the mega menu position

If you make changes in the header and menu you might need to adjust the position of the mega menus.

Each mega menu has its own CSS module. When you open it you see something like this:

You can play with the values to reposition the mega menu and the arrow of the mega menu.

For advanced users

I like to do this on the front end with Google inspector tools to get quickly the good position settings.

Here is a screenshot on how to show up the mega menu in inspector mode.

Make the li as hover state (right-click on it).

Then select the div under that li and uncheck the opacity under hmm-default class.

Then scroll up a bit in the CSS box and you will find those values and you can play with them for the right position settings.

FAQ

The width of my header is not the same as in the demo?

I have set the width of all my rows to 1240px in Divi > Theme Customizer > General Settings > Layout Settings

Double or different icons?

In some cases, you can see this after importing a header.

Open the CSS code module in your header. In case you cannot find this module then switch to wireframe view (left bottom).

Under “End Colors” comment, you will find the icons.

In this case, there are two icons (some headers can have more icons).

33 and 32 are the icon numbers but there is a backslash missing in the front of these icon numbers.

For some reason, this backslash \ is getting stripped out after importing a header.

The fix is very easy you just need to add a backslash \ before the number like this:

Need Help?

Email: info@markhendriksen.com

Free Layout Packs

Join my free membership and get access to 17 free Divi layout packs.

Join Free Membership