How to make a Divi slide in menu (or full screen menu) and a default style menu at the same time.

TIPS

Jun 28, 2018 | Divi Tips | 0 comments

NOTE: This an old method and I’m sure there is an easier way using the new Divi theme builder.

How to make a Divi slide in menu (or full screen menu) and a default style menu at the same time. This way the mobile style (hamburger) icon will appear in the upper right that opens the slide out menu. And, you can add a regular style menu in the center. It requires some HTML and CSS updates but are quite easy.

Below is a method I used to make a client menu look like this:
2 Divi menus at the same time

You’ll need to use a child theme and paste the following into the functions.php file. You can find this in Appearance > Editor.

The code below will create a new widget area called “Header” in your Appearance/Widget area.

[php]
// Create the new widget area
function myprefix_widget_area() {
    register_sidebar(array(
        'name' => 'Header',
        'id' => 'myprefix-widget-area',
        'before_widget' => '
<div id="%1$s" class="et_pb_widget %2$s">',
        'after_widget' => '</div>

<!-- end .et_pb_widget -->',
        'before_title' => '
<h4 class="widgettitle">',
        'after_title' => '</h4>

',
    ));
}
add_action('widgets_init', 'myprefix_widget_area');

// Create the widget area and then move into place
function myprefix_footer() {
?>
<div id="myprefix-widget-area-wrap">
        <?php dynamic_sidebar('myprefix-widget-area'); ?></div>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20jQuery(function(%24)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23et-top-navigation%22).after(%24(%22%23myprefix-widget-area-wrap%22))%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24(%22%23myprefix-widget-area-wrap%22).show()%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
<?php  }  add_action('wp_footer', 'myprefix_footer'); // Adjust the layout so that it fits into the header better. Make adjustments to the CSS as needed below.  function myprefix_css() {  ?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%23myprefix-widget-area-wrap%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20display%3Anone%3B%3Cbr%20%2F%3E%0A%20%20%20%20float%3Aright%3B%3Cbr%20%2F%3E%0A%20%20%20%20max-width%3A%20600px%3B%3Cbr%20%2F%3E%0A%20%20%20%20clear%3Aright%3B%3Cbr%20%2F%3E%0A%20%20%20%20position%3Arelative%3B%3Cbr%20%2F%3E%0A%7D%3Cbr%20%2F%3E%0A%23myprefix-widget-area-wrap%20.et_pb_widget%20%7B%20margin-right%3A0px%20%7D%3Cbr%20%2F%3E%0A%23myprefix-widget-area-wrap%20.et_pb_widget%3Alast-child%20%7B%20margin-bottom%3A%205px%3B%20%7D%3Cbr%20%2F%3E%0A.et-fixed-header%20%23myprefix-widget-area-wrap%20.et_pb_widget%3Alast-child%20%7B%20margin-bottom%3A%205px%3B%20%7D%3Cbr%20%2F%3E%0A%20%20%20%20%40media%20only%20screen%20and%20(%20max-width%3A%20980px%20)%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%23myprefix-widget-area-wrap%20.et_pb_widget%3Alast-child%20%7B%20margin-bottom%3A%200px%3B%20%7D%3Cbr%20%2F%3E%0A%20%20%20%20%7D%3Cbr%20%2F%3E%0A%20%20%20%20%40media%20only%20screen%20and%20(%20max-width%3A%20768px%20)%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20%20%20%20%20%23myprefix-widget-area-wrap%20.et_pb_widget%3Afirst-child%20%7B%20margin-top%3A%205px%3B%20%7D%3Cbr%20%2F%3E%0A%20%20%20%20%7D%3Cbr%20%2F%3E%0A%2F*%20OPTIONAL%20STYLING%20BEGIN%20-%20DELETE%20THESE%20IF%20NOT%20NEEDED%20*%2F%3Cbr%20%2F%3E%0A%23myprefix-widget-area-wrap%20%7Bposition%3Arelative%3B%20left%3A-380px%3B%20top%3A-35px%3B%20margin-bottom%3A%20-5px%3B%7D%3Cbr%20%2F%3E%0A%40media%20only%20screen%20and%20(max-width%3A%201100px)%7B%3Cbr%20%2F%3E%0A%20%20%20%20%23myprefix-widget-area-wrap%20%7Bleft%3A-150px%3B%7D%3Cbr%20%2F%3E%0A%7D%3Cbr%20%2F%3E%0A%40media%20only%20screen%20and%20(min-width%3A%201405px)%20and%20(max-width%3A%203000px)%20%7B%3Cbr%20%2F%3E%0A%20%20%20%20%23myprefix-widget-area-wrap%20%7Bleft%3A-500px!important%3B%7D%3Cbr%20%2F%3E%0A%7D%3Cbr%20%2F%3E%0A%2F*%20OPTIONAL%20STYLING%20END%20*%2F%3Cbr%20%2F%3E%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />

<?php } add_action('wp_head', 'myprefix_css');  ?>
[/php]

Next step. Use the HTML below to hard code your menu items. This is the same HTML the Divi theme uses for their default menu. Modify it as you see fit.

Then, add a Custom HTML widget to the new Header widget area and paste your updated code.

[php]
<div id="et-top-navigation-custom" data-height="73" data-fixed-height="40" style="text-align:center;">
<nav id="top-menu-nav-custom">
<ul id="top-menu" class="nav">
<li id="menu-item-9911" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9911"><a href="your-link-url">Link</a></li>
<li id="menu-item-9912" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9912"><a href="your-link-url">Link</a></li>
<li id="menu-item-9913" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9913"><a href="your-link-url">Link</a></li>
<li id="menu-item-9914" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9914"><a href="your-link-url">Link</a></li>
<li id="menu-item-9915" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9915"><a href="your-link-url">Link</a></li>
</ul>
</nav>
</div>

[/php]

Go to the Theme Customizer in the Header Navigation area and choose the Slide Out menu option. NOTE: This will use the main menu.

TIP: You may want to hide your custom menu on mobile devices and add the same links to the main menu on mobile only. This is how you’d do it.

Add the links to your main menu where you want them to appear on mobile. Then, add the following class to these menu items: customMenuHideDesktop

Next, add the following CSS to the Divi options area. This will hide the menu items on the desktop view of the slide out menu and make them appear on the mobile view only.

.customMenuHideDesktop {visibility:hidden; height:0px;}
    @media only screen and (max-width: 1100px){
        .customMenuHideDesktop {visibility:visible; height:auto;}
    }

If you want to add the “MORE” text above the slide out menu icon, add the following CSS to the Divi options area.

#et-top-navigation:before {
    content: "MORE \A";
    white-space: pre;
    position: relative;
    right: 3px;
    font-size: 13px;
    margin-top: -10px;
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

More Tips

Ad - Web Hosting from SiteGround - Crafted for easy site management. Click to learn more.

Cloudways Hosting

WPEngine Hosting

Pressable Hosting

AccuWeb Hosting

Ask the Divi Guy a Question

"*" indicates required fields