719-646-4524 in Colorado Springs

Divi gives tons of ways to customize your header, but occasionally a client wants more menu options. There are a lot of plugins available to modify the menus, but plugins aren’t always the answer and often cost $$$. There is an option that doesn’t require a plugin. Here is a way to have a hamburger menu and a centered menu in the header of all of your pages!

You will need the Divi Theme for this example. You can get it from Elegant Themes.

Double Menu Image | Shanora.net
First you will need to have a child theme

Next go into Theme Customizer >> Header Format

and set the Header Style to Slide In, which gives you the hamburger in the top right of the header.

In your child theme you should have a functions.php and style.css.

Copy The Necessary Files

Copy the entire header.php from Divi to your Divi child theme. The path is going to be something like:

…/wp-content/themes/Divi/header.php

Edit the Child Theme files

1. Open up your functions.php and add the following snippet of code:

function custom_new_menu() {

register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));

}

add_action( 'init', 'custom_new_menu' );

Remember to save your changes!

2. Now you will have to add some code to your header.php file. Open it up and look for:

<div class="logo_container">
<span class="logo_helper"></span>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>">
</a>

</div>

See that last </a> and </div>? Go ahead and add the following php between the two:

<!--?php
wp_nav_menu( array( 
'theme_location' =--> 'my-custom-menu', 
'container_class' =&gt; 'custom-menu-class' ) ); 
?&gt;

Again, remember to save your changes.

3. Add your CSS

In your Child Theme style.css file you will want to add the following:

div.custom-menu-class ul {

list-style-type: none;

list-style: none;

list-style-image: none;

}


div.custom-menu-class li {

padding: 20px;

display: inline;

}

.custom-menu-class {

postition:relative;

text-align: center;

margin-top:-4%;

}

The value for margin-top may need to be adjusted for your site’s settings.

Adjust Your Menu Settings

You can now go into appearance >> menus and select the option you would like for the Primary Menu (hamburger) and the My Custom Menu (centered). If you’d like you can opt for both to be the same.

You will want to add styles to fit your needs. I’m a fan of using as few tweaks as possible, so remember that the some settings (link font-color, link font-size ,etc.) can be adjusted in the Theme Customizer. Additionally, you can add custom settings for additional styles, such as hover effects, by adding your modifications the child theme style.css:

.custom-menu-class a:hover {
color: red;
border:white dashed 2px;

Now you should have all the tools to create an awesome Divi double menu!

"Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission."