Divi Headers Pack

The Ultimate Headers Solution Pack with

OFF-CANVAS Menu

(Documentation v2.3)

Only change Content, Typography & Colors of the

Headers to match your branding.
There are 6 categories of headers in our pack:
1) Easy-Headers — Beginner-Friendly, easy to
customize
2) Standard Headers — Knowledge of CSS is
required to work with them
3) Woo-Headers — Knowledge of CSS is required to
work with them
4) Creative-Headers — Knowledge of CSS is required
to work with them
5) RTL Headers — Knowledge of CSS is required to
work with them
6) Vertical Logo Headers — Knowledge of CSS is
required to work with them
Only Easy-Headers are beginner-friendly & built
with just Divi’s default settings. If you don’t know CSS
then please Stick with the Easy-Headers. 50 Designs
are already available. More will be available soon.

2
 Table of Contents
You Can: ............................................................................................................................. 5
You Can’t: .......................................................................................................................... 5
Procedure: ......................................................................................................................... 6
Quick Tips: ....................................................................................................................... 10
For Logo .......................................................................................................................... 10
For Desktop Menu .......................................................................................................... 12
For Mobile Nav Section .................................................................................................. 13
For Search Module Icon ................................................................................................. 13
For Mobile Hamburger ................................................................................................... 13
For Mobile Close (Slider) ................................................................................................ 14
Headers that Show after some Pixels ............................................................................ 15
For Code Module ............................................................................................................ 16
Collapsing of subitems with parent click ....................................................................... 17
Unstyled Header on page load ....................................................................................... 19
Hide Header while designing website ............................................................................ 20
For Extra Theme ............................................................................................................. 21
For RTL Headers ............................................................................................................. 21
Not Seeing any Change .................................................................................................. 22
Setting up Woo-Headers ............................................................................................ 23
Setting up cart count with bag icon ............................................................................... 23
Login form + button ....................................................................................................... 24
Search products only ...................................................................................................... 25
Freebie – Menu Effects ................................................................................................. 26
Freebie – Dropdown Menu Effects ............................................................................ 26
Have Idea? ....................................................................................................................... 27

3
i Basic Info:
E These Headers have been designed based on the
Module’s requirements. For Example, ddh041
contains 2 small blurbs, 1 social follow, 1 image (For
Logo), 1 menu and 1 button.
E Each Header design has more than one (functional)
headers based on the functionalities used for that
Design. For Example, First Header design in our
collection contains 11 functional headers numbering
ddh001 to ddh011.
E Each functional Header has three Header layouts, one
for the off-canvas menu to slide from the left, second
from the right and the third to show menu in
Fullscreen.
E Headers may look ugly in visual builder (because of
custom coding) but will be perfect on live site.
E As Easy-Headers are built with jut Divi’s default
settings so most of the Quick Tips section settings
won’t apply to them.
E Always open Layers panel to customize headers.

4
 R You Can:
E Design each & every module.
E Change only those values in the code module
where we have commented out.
E Add any module under Mobile Menu Module in
“Mobile Nav” Section.

Q You Can’t:
E Delete the code module placed in the first row of
first section.
E Change the values of spacing tab.
E Add any new module in Header Layouts except in
“Mobile Nav” Section.
E Remove CSS ID & Classes from any Section, Row,
Column or Module.
E Touch any option in the visibility toggle.

If you can’t understand it then just remember to

change Content, Fonts & Colors of the Header
to match your branding.

5
i Procedure:

1. Login to Elegant Themes website &

head over to “Your Marketplace
Products” in Members Area.
Download Supplementary files &
unzip it. Previews are available in
the Supplementary zip.

2. Choose the header design from Design folder (Preview v# >

Design) according to your requirements.

3. Now in the functional folder (Preview v# > Functional >

index.html) you have the opportunity to select functionality
for that design like Fixed, shows on scroll up, reveal after
some pixels, second section stays sticky while first
disappears etc.

6
 4. Once header has been selected from functional folder
(Preview v# > Functional > index.html) now it’s time to import
Header in Divi Library. To do that go to the Divi Library (Divi
> Divi Library) and click on the “Import & Export” button.

5. In this Portability Dialog box click on import.

Browse that Header in the Files folder and click on
“Import Divi Builder Layouts”.

7
6. You can see three layouts have been imported in the
Divi Library. Go to the Theme Builder (Divi > Theme
Builder) Click on “Add Global Header” and then “Add From
Library”. In this Dialog box go to “Your Saved Layouts”
and select the layout Left, Right or Fullscreen to your
choice. Once the layout is imported click on “Save
Changes” in the theme Builder. Same process works for
Custom Template.

8
 7. Now it’s time to customize your header. Click on
pencil icon in the left side of header. Once Layout is
loaded recommendation is to open the Layers panel
and customize each module by keeping in mind You
Can/You Can’t Strategy or just change Content, Fonts &
Colors. For ease we have labeled each module. Layout
may look ugly because some modules are hidden in
desktop view.
8. Please read out Quick Tips Section for deep
customization.

9
 Quick Tips:
For Logo
The Module labeled as “Logo” is an image module.
Here you can set your logo by simply choosing an image
or by using dynamic content if you have set your Logo in
Theme Options (WP Admin > Divi > Theme Options > Logo). You
can also link this image to Homepage in link tab (Logo >
Content > Link) by dynamic content.

Headers that change styling after scroll also have the

ability to change logo after scroll. To do that you have to
copy the logo URL that will show after scroll and paste it

10
 in small brackets in the code module where we have
mentioned out.

11
For Desktop Menu
In some Headers Desktop menu is at center while in
some cases it is towards right side. You can customize
menu to your own. Go to Desktop Menu Spacing tab, if
margin left and right are set to auto it means menu is at
center. You can add pixel value in right field to make it
towards right.

12
 For Mobile Nav Section
Mobile Nav Section is the section that slides from left
or right when hamburger icon is clicked. By default, its
width is set to 80% but you can change it from sizing tab
according to your requirements. But please do not change
its height(100vh). You can play with background settings
to add color, gradient, image etc. First row in this section
contains close slider. Second row contains mobile menu +
other modules. You can add any Divi module in this row.

For Search Module Icon

If you want to use search module with icon in Mobile
Nav Section then insert search module and in CSS ID &
Classes add class dd-search. It will add search icon to the
right of input field. Change the icon color & icon
background color from code module where we have
commented out.

For Mobile Hamburger

Mobile Hamburger is Just a native Blurb Module. Go
to (Mobile Hamburger > Design > Image & Icon) to change the
icon color. Same for Mobile Close (Slider) Module.

13
For Mobile Close (Slider)
This is also Blurb Module. You can align it left or right
by changing the code in its column’s Custom CSS tab in
second line.

flex-start for left alignment

flex-end for right alignment

14
 Headers that Show after some Pixels
You can control after how may pixels these headers
translate from Y. By default, we have set it to 620 pixels.
But you can change it to any pixel value. Just change pixel
value 620 to any value you want.

But only change value where you found “dd-

translate-Y” next to pixel value line.

15
For Code Module
In code module only
change those values where we
have commented out. Box-
shadow toggle in Divi contains
four pixel values and one color
field. These pixel values are
same in order of CSS rule.

16
 Collapsing of subitems with parent click
Divi doesn't provide us the feature of collapsing the
subitems. We coded it for our headers. Our code expands
sub-items on clicking the + icon because in most cases the
parent item has its own link. But in order to expand
subitems by clicking whole parent item you need to delete
our code & add from third person. You can achieve it using
these steps:
---1-) Open the code module by navigating modules
through the layers panel view. You need to delete our
code from 2 places as I told you earlier.
---2-) delete the CSS code from lines 51 to 82.
---3-) find this code from script tags (almost at end of
code) & delete it:
______________

(function($) {
function setup_collapsible_submenus() {
// mobile menu
$('#dd-menu-mobile .mobile_nav .menu-item-has-
children > a').after('<span class="menu-closed"></span>');
$('#dd-menu-mobile .mobile_nav .menu-item-has-
children > a').each(function() {

17
 $(this).next().next('.sub-
menu').toggleClass('hide', 1000);
});
$('#dd-menu-mobile .mobile_nav .menu-item-has-
children > a + span').on('click', function(event) {
event.preventDefault();
$(this).toggleClass('menu-open');
$(this).next('.sub-
menu').toggleClass('hide', 1000);
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);

______________

Now we are clear, means ready for the new code

(parent item will behave as a toggle). You can achieve that
using the code provided by Ivan Chi. You just need to
copy/paste the jQuery & CSS from Solution 2 & things will
be good.

18
 Unstyled Header on page load

It is known as Flash of Unstyled Content. This happens

when the styling isn't fully loaded when the page is first
loaded. There are two solutions to tackle this kind of
situation:
1.) Using a Preloader plugin (recommended)
Using a Preloader is the best way to hide this. You can
use any Preloader plugin. We recommend WP Smart
Preloader. This plugin comes with 6 Preloaders. Just add
this CSS code in its custom CSS tab (WP Admin > Settings
> WP Smart Preloader > Custom CSS).

19
.smart-page-loader {

z-index: 99999999;

2.) Enabling Static CSS File Generation

You can also enable Static CSS File Generation (WP
Admin > Divi > Theme Options > Builder > Advanced). By this
builder’s inline CSS will be cached and served as static
files. But if you enabled this option and then design
anything in the website, you will not be able to see
changes.

Hide Header while designing website

Please hide your header on front end while designing
website. Otherwise “Mobile Nav” Section will overlap your

20
 page content in Tablet & Mobile view and you may face
trouble while designing.

For Extra Theme

To use headers in Extra theme just copy the code
from “For extra theme.css” file and paste it WP Admin > Divi
Theme Options > General > Custom CSS or stylesheet of child
theme.

For RTL Headers

Your WordPress Dashboard must have RTL
Language (WP Admin > Settings > General > Site Language) in
order to use RTL Headers.

21
Not Seeing any Change
If you are not seeing any change after editing header
then you have to clear cache by going into Theme options >
Builder > Advanced > Static CSS File Generation. Disable it
and Save Changes.

Then edit you Header in Theme Builder.

22
 Setting up Woo-Headers
The installation process of Woo-Headers is same as
written above. There are just three things you need to
understand.
Setting up cart count with bag icon
1-) First you need to install the zip file named “woo-
menu-cart-icon.zip” as a plugin in your dashboard. It grabs
the bag icon from font-awesome + cart items count &
styles them. This file can be found in your product zip file
(Divi Headers Pack v# > Files > Woo-Headers).

2-) Create a menu with name “woo-menu” in the

WordPress dashboard (WP-Admin > Appearance > Menus) & add
one page item to this menu. Don’t worry menu item will
not appear in the front-end.

23
 3-) In the Header open the settings of module labeled
“woo-menu” & select the woo-menu from the menu list.

Bag icon color can be changed from (woo-menu > Design

> Menu Text > Menu Text Color).

Login form + button

Login button is a blurb module with person icon. Its
color can be changed from (Login Button > Design > Image &
Icon).

The module labeled as “Login” is a login module. You

have full control to change its styling link Typography,
Colors, Borders, Box-shadows etc.

24
 Search products only
Search forms in Woo-Headers only search products.
So, your search results theme builder page must have a
shop module with “Use Current Page” option enabled.

25
 Freebie – Menu Effects
Menu Effects are CSS snippets. But don’t worry, we
dedicated a guide to these menu effects which you can
find in Freebie - Divi Menu Effects folder (Files > Freebie –
Divi Menu Effects > Documentation). Also Previews of these
effects are available in Supplementary Files.

Freebie – Dropdown Menu

Effects
Dropdown Menu Effects are CSS snippets. But don’t
worry, we dedicated a guide to these menu effects which
you can find in Freebie - Dropdown Menu Effects folder (Files
> Freebie – Dropdown Menu Effects > Documentation). Also
Previews of these effects + animations are available in
Supplementary Files.

26
 Have Idea?
If you have any header design idea in your mind with
any kind of functionality then let us know. We’ll try to add
that header in our collection soon.
Also, we will update our product regularly. So, keep
checking on.

27