How to make a Divi mega menu using Divi modules without buying a plugin.

There are a few Divi mega menu plugins out there and they work nicely for the most part. But, they can be pricey and some are a bit bulky.

Using this method requires 2 things:

1. Install the free “Shortcode in Menus” plugin for adding shortcodes to your menu.
2. Add the function below to your child theme functions.php file.

The custom function does 2 things:

1. Allows us to use a shortcode to display a Divi Layout anywhere we like. In this case we’re adding them to a mega menu, sub-menu item.
2. Adds a “Module Shortcode”column in the Divi Library for each library item. It displays the shortcode you can copy/paste anywhere*.

STEPS

1. Go to the Divi/Divi Library and make a layout for one of your mega menu dropdowns. You can make any layout you want and use any Divi module you like.
   TIP: Remove all spacing in the section and rows as the mega menu will already have spacing by default. You may also want to use a custom Gutter width of 1 or 2 in your row settings.
2. Copy the shortcode for your Divi Library layout.
3. Go to Appearance/Menus and add a top level menu item. Make sure to add the “mega-menu” class.
4. Add a sub-menu to the above top level menu link using the Shortcode menu item. Paste your Divi Library shortcode in the description field.

TIP: If you want the top level menu links to have a different style than your mega menu links, use the CSS below to get you started and paste in the Divi theme options/Custom CSS area.

*ANOTHER TIP: You can paste the same shortcode inside of another Divi module. Like maybe an accordion, blurb, or text module.  Maybe even inside your sliders? Lots of possibilities!

That’s all!

Link to TXT file for easier copy/paste.

// create new column in et_pb_layout screen
add_filter( 'manage_et_pb_layout_posts_columns', 'ds_create_shortcode_column', 5 );
add_action( 'manage_et_pb_layout_posts_custom_column', 'ds_shortcode_content', 5, 2 );
// register new shortcode
add_shortcode('ds_layout_sc', 'ds_shortcode_mod');

// New Admin Column
function ds_create_shortcode_column( $columns ) {
$columns['ds_shortcode_id'] = 'Module Shortcode';
return $columns;
}

//Display Shortcode
function ds_shortcode_content( $column, $id ) {
if( 'ds_shortcode_id' == $column ) {
?>
<p>[ds_layout_sc id="<?php echo $id ?>"]</p>
<?php
}
}

// Create New Shortcode
function ds_shortcode_mod($ds_mod_id) {
extract(shortcode_atts(array('id' =>'*'),$ds_mod_id));
return do_shortcode('[et_pb_section global_module="'.$id.'"][/et_pb_section]');
}
?>

<style>
.mega-menu.first-level {
    font-size:16px;
    font-weight:500;    
}
</style>