Divi Integration Guide

Introduction

Please follow the instructions below to replace Divi’s menu with HeroMenu. The menu within Divi will interfere with HeroMenu, so we have to remove some code in order to make sure Divi has no effect on HeroMenu.

Take Note

All changes are done within the header.php file. Start by making a backup of this file. Please also note in future that theme updates by the author might overwrite the header.php. So make sure that when you do a theme update, also do this bit in the header.php file again.

Manual Integration

Replace the following code within header.php:

<header id="main-header" class="<?php echo esc_attr( $primary_nav_class ); ?>">
    <div class="container clearfix">
    <?php
        $logo = ( $user_logo = et_get_option( 'divi_logo' ) ) && '' != $user_logo
            ? $user_logo
            : $template_directory_uri . '/images/logo.png';
    ?>
        <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" />
        </a>

        <div id="et-top-navigation">
            <nav id="top-menu-nav">
            <?php
                $menuClass = 'nav';
                if ( 'on' == et_get_option( 'divi_disable_toptier' ) ) $menuClass .= ' et_disable_top_tier';
                $primaryNav = '';

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

                if ( '' == $primaryNav ) :
            ?>
                <ul id="top-menu" class="<?php echo esc_attr( $menuClass ); ?>">
                    <?php if ( 'on' == et_get_option( 'divi_home_link' ) ) { ?>
                        <li <?php if ( is_home() ) echo( 'class="current_page_item"' ); ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Home', 'Divi' ); ?></a></li>
                    <?php }; ?>

                    <?php show_page_menu( $menuClass, false, false ); ?>
                    <?php show_categories_menu( $menuClass, false ); ?>
                </ul>
            <?php
                else :
                    echo( $primaryNav );
                endif;
            ?>
            </nav>

            <?php
            if ( ! $et_top_info_defined ) {
                et_show_cart_total( array(
                    'no_text' => true,
                ) );
            }
            ?>

            <?php if ( false !== et_get_option( 'show_search_icon', true ) ) : ?>
            <div id="et_top_search">
                <span id="et_search_icon"></span>
                <form role="search" method="get" class="et-search-form et-hidden" action="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php
                    printf( '<input type="search" class="et-search-field" placeholder="%1$s" value="%2$s" name="s" title="%3$s" />',
                        esc_attr__( 'Search …', 'Divi' ),
                        get_search_query(),
                        esc_attr__( 'Search for:', 'Divi' )
                    );
                ?>
                </form>
            </div>
            <?php endif; // true === et_get_option( 'show_search_icon', false ) ?>

            <?php do_action( 'et_header_top' ); ?>
        </div> <!-- #et-top-navigation -->
    </div> <!-- .container -->
</header> <!-- #main-header -->

With the following:

<?php wp_nav_menu(array('theme_location' => 'primary-menu')); ?>

 

Menu Location Settings

Navigate to Hero Menu » Settings » Menu Integration and set menu location to Primary-Menu.

 

Manual style changes

Before we can properly setup HeroMenu on Divi we need to add some css overwrites to the style.css file.

#page-container{ 
	padding-top:0px !important;
}