In this tutorial I’ll show you how to create two-column submenus for Divi desktop menu. This will help you improve the usability of your website menu by making the lengthy submenus (having lots of items) more compact and easier to navigate.

Contents

1. Demo
2. How It Works
3. Create two-column submenus for Divi Menu and Fullwidth Menu module menus
4. Customize individual two-column submenus
5. Create two-column submenus for Divi MadMenu menus
6. Final Thoughts

Demo

How it works

To create two-column submenus for Divi desktop menu we will use the built-in functionality of WordPress allowing to add custom CSS classes to each menu item in Appearance -> Menus.

This allows us to do whatever we want with those menu items as well as their submenus.

So, we will add custom CSS classes to the parent menu items that we want to create two-column submenus for.

And then use these CSS classes in the custom CSS which will transform the default single-column submenu into a two-column submenu.

Create two-column submenus for Divi Menu and Fullwidth Menu module menus

The approach discussed in this tutorial allows creating two-column submenus both for the Divi Menu and Fullwidth Menu modules.

Add custom CSS class to parent menu item

First we need to add the dvcs_two_cols_submenu CSS class to the parent menu items that we need to create the two-column submenus for.

To do that we need to go to the Appearance -> Menu and make sure the CSS Classes field is enabled for menu items (check Screen Options -> CSS Classes).

Then select the menu from the list and add the dvcs_two_cols_submenu CSS class to parent menu items as shown in the screenshot below. 

Add custom CSS to create two-column submenu

The second step is adding the custom CSS to the page/template containing your menu. We’ll use a Code module for that.

To arrange submenu items into two columns we’ll use CSS Flexbox, however, CSS Grid would work just fine as well.

The CSS below arranges the items of submenu of the parent menu item having the dvcs_two_cols_submenu CSS class into two columns using Flexbox and by setting the submenu and it’s items width values accordingly. Also it includes a few fixes for some minor spacing and alignment issues.

/**
 * Create two-column submenus for 
 * Divi Menu and Fullwidth Menu modules 
 * as well as Divi MadMenu module desktop menus.
 * 
 * @author Ivan Chiurcci
 * @site   https://divicio.us
 *
 */
/* submenu */
li.dvcs_two_cols_submenu > ul.sub-menu {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
li.dvcs_two_cols_submenu > ul.sub-menu > li {
  width: 50%;
}
li.dvcs_two_cols_submenu > ul.sub-menu > li > a {
  width: 100%;
}

/* submenu width */
li.dvcs_two_cols_submenu > ul.sub-menu {
  width: 450px;
}
/* lower level submenu left offset */
li.dvcs_two_cols_submenu > ul > li > ul {
  left: 100%;
}
/* reversed lower level submenu right offset */
li.dvcs_two_cols_submenu.et-reverse-direction-nav > ul > li > ul {
  left: auto;
  right: 100%;
}

/* (optional) fix submenu padding */
#et-main-area .et_pb_menu .et-menu-nav > ul ul,
#et-main-area .et_pb_fullwidth_menu .et-menu-nav > ul ul {
  padding: 20px 0;
}

/* (optional) fix submeu parent item icon alignment */
.et-menu li li.menu-item-has-children > a:first-child:after {
  top: 6px;
}

/* (optional) fix lower level submenus top alignment */
.nav li li ul {
  top: 0px;
}

Here is the result.

Looks nice, however, this may not suit your website menu depending on the menu items text length used.

By default, the CSS above sets all two-column submenus width to 450px, but most of the time you will probably need to adjust the width for each submenu individually.

And that’s what we’ll do next.

Customize individual two-column submenus

To be able to set different width values for each two-column submenu we will add another CSS class to the parent menu items that we’ve already added the dvcs_two_cols_submenu CSS class to.

This second CSS class can be anything you like. I used the name of each parent menu item as a CSS class and added it next to the dvcs_two_cols_submenu class (note the space between the CSS classes).

In fact, this will allow us not only set the individual width values for the submenus but also apply any other individual customizations for the submenus.

So, let’s apply a smaller width for the Blog item submenu using this custom CSS:

/* "Blog" item two-column submenu width */
li.dvcs_two_cols_submenu.blog > ul.sub-menu {
  width: 390px;
}

Note the use of both custom CSS classes in the selector (li.dvcs_two_cols_submenu.blog > ul.sub-menu) for targeting this exact submenu. As you can see on the screenshot below, the submenu width has been decreased and now it looks better.

You can use the same approach to adjust the width values for other two-column submenus as well including the lower level submenus.

Though I would suggest to avoid having more than two levels of submenus in the menu which may not be good from the user experience perspective.

For this tutorial demo I’ve used the following CSS to set the individual two-column submenus width values:

/* "Blog" item two-column submenu width */
li.dvcs_two_cols_submenu.blog > ul.sub-menu {
  width: 390px;
}

/* "Divi Products" item two-column submenu width */
li.dvcs_two_cols_submenu.products > ul.sub-menu {
  width: 430px;
}

/* "Demos" item two-column submenu width */
li.dvcs_two_cols_submenu.demos > ul.sub-menu {
  width: 310px;
}

/* "Demos 3" item two-column submenu width */
li.dvcs_two_cols_submenu.demos3 > ul.sub-menu {
  width: 310px;
}

Create two-column submenus for Divi MadMenu menus

The CSS provided in this tutorial works for Divi MadMenu menus as well, you don’t need to adjust anything, just use the same CSS and follow the same instructions.

Final Thoughts

In this tutorial you’ve learned how to create two-column submenus for Divi desktop menus.

The method discussed in this tutorial can be improved further to add more than two columns to the submenus of your website menu if you need that.

However, in such a case I’d recommend creating a mega menu instead, Divi has a built in basic mega menu functionality that can be activated for a submenu by adding the mega-menu CSS class to the parent menu item the same way we’ve added the dvcs_two_cols_submenu class above.

Feel free to share your suggestions and thoughts in the comments section below.