Divi Meta Menu Tutorial

***Updated 4/29/2020 to include theme-header.php***

Being new to Divi, I had so many questions, one in which was creating a horiztonal menu with a slide-in menu through Divi. Well back in 2017, a man by the name Rob Laughter created a way to do this and this is his tutorial.

DIVI CUSTOMIZATION TUTORIAL

META MENU WITH SLIDE IN MENU

This tutorial will teach you how to add a visible navigation area beside your slide-in or full-screen menu.

This is an advanced tutorial intended for developers only. If you make a mistake here, you can break your site. Future Divi updates may also present problems with this method. By following this tutorial, you acknowledge that you’re doing so at your own risk and that no support will be provided.

Live Examples

0. Create and activate a child theme.

If you haven’t created a child theme for Divi, you can use an online tool to generate one.

Exercise caution if you are using a commercial child theme; future updates to your child theme may overwrite your customizations.

1. Copy Divi’s header.php or theme-header.php to your child theme.

Copy the file found at /wp-content/themes/Divi/header.php or /wp-content/themes/Divi/theme-header.php to your child theme directory.

2. Register a custom menu in your child theme’s functions.php.

Add the following lines to your child theme’s functions.php file.

// Register menu area for beside the slide-in menu
register_nav_menu( ‘meta-menu’, ‘Meta Menu’ );

3. Modify your custom header.php or theme-header.php

Note: if you’re not familiar with PHP or HTML, making a mistake here can break your site. If your site stops working, remove your header.php or theme-header.php and start again.

Make the following two modifications:

Replace your primary menu with your meta menu.
Display your menu when the desired menu layout is selected in the theme customizer.

Replace your primary menu with your meta menu.

Search for the following line in your custom header.php or theme-header.php:

$primaryNav = wp_nav_menu( array( ‘theme_location’ => ‘primary-menu‘, ‘container’ => ”, ‘fallback_cb’ => ”, ‘menu_class’ => $menuClass, ‘menu_id’ => ‘top-menu’, ‘echo’ => false ) );

Replace the primary-menu slug with meta-menu.

Display your menu when the desired menu layout is selected in the theme customizer.

Search for the following line in your custom header.php or theme-header.php:

<?php if ( ! $et_slide_header || is_customize_preview() ) : ?>

Replace with:

<?php if ( $et_slide_header || is_customize_preview() ) : ?>

The original line displays the top menu area only if the header style is not set to a slide-in header. By removing the !, you’re instructing Divi to display the top navigation when the header style is set to a slide-in header.

4. Assign menu items to your meta menu

Visit Appearance > Menus. Create a new menu for your meta menu, add items, and assign it to the Meta Menu theme location.

5. Display and tweak your menu with CSS

Divi hides the top menu when slide-in or full-screen menus are active. You’ll need to display the menu with CSS.

Add the following CSS to your child theme’s style.css:

.et_header_style_fullscreen #top-menu-nav, .et_header_style_slide #top-menu-nav, .et_header_style_slide .et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu, .et_slide_in_menu_container #mobile_menu_slide ul.sub-menu {
display: block;
position:relative;
top: 10px;
}
.et_pb_header_toggle { float:right; margin-left: 30px; }

Depending on your header configuration, you may need to tweak the position of your meta menu with CSS. To do so, adjust the top: 0px; value to position the menu inline with the toggle.