The Divi Mega Menu is a great feature that comes with the Divi theme. But in all honesty, it lacks in settings that make it easy to customize your Mega Menu.

Unless you are very familiar with CSS, your Divi Mega Menu is most likely going to look the same as most of the other Divi sites using it.

Not anymore. I have several tricks up my sleeve for making the Divi Mega Menu stand out in the crowd.

In this tutorial I am going to show you how to make it compact, how to create categories within your mega menu, and a whole lot more. I even included a little extra CSS to make the standard sub-menu match the style of your brand new Compact Mega Menu.

View The Live Demo

 

Creating The Mega Menu

Rather than just have four columns of links, I want to have each column be it’s own category. This is great when you have a lot of sub-pages or subcategories.

001 compact mega menu

 

1. Go to Appearance > Menus and select your main menu. If you have never created a Menu in here, then you will want to check out this short video tutorial by ithemes.

002 compact mega menu

 

2. In the upper right hand corner you will find a tab called Screen Options. Click on it to reveal more options.

003 compact mega menu

 

3. Tick the box labeled CSS Classes.

004 compact mega menu

 

4. Now go to the menu item you would like to convert to a Mega Menu, and in the box labeled CSS Classes (optional), type in this shortcode: mega-menu

005 compact mega menu

 

NOTE:

When creating your Mega Menu, keep in mind that the first sub-menu is going to be the category. There should be 4 sub-menu items under the main menu item. You could have more or less but this is designed for 4.

If you need more I would save that for the next menu item. I will have a tutorial for having less than 4 columns in the near future.

Under each of the 4 sub-menu items, you can add items that fall under that category. So your Mega Menu structure should look something like this.

006 compact mega menu

 

Great. Now that you have all your menu items set up, now its time to add a little magic.

 

Adding The Custom CSS

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>Custom CSS (which is located at the bottom of the first tab in Theme Options)

1. Add this CSS.

/*------------------------------------------------*/
/*----------[GQ - COMPACT MEGA MENU]--------------*/
/*------------------------------------------------*/

/* standard drop down */
	.nav li ul {
		width: 160px;
		padding: 0px 0 3px;}
	.nav li li {
		line-height: 14px;}
	.nav li li a {
		font-size: 13px;}
	#top-menu li li {
		margin: 0;
		padding: 0px 5px;}
	#top-menu li li a {
		width: 150px;}

/* mega menu drop down */
	#top-menu li.mega-menu > ul {
		width: 600px;
		padding: 5px 5px;}

	#top-menu li.mega-menu > ul > li > a, #top-menu li > ul > li > a {
		padding: 7px 5px 7px;}

/* default or centered style header mega menu alignment */
	.et_header_style_left #top-menu li.mega-menu > ul {
		left: auto!important;
		right: 0;}

	.et_header_style_centered #top-menu li.mega-menu > ul {
		left: auto!important;}

	.et_header_style_centered #top-menu > li:last-child.mega-menu > ul {
		left: auto!important;
		right: 0!important;}


/* first row of titles */
	#top-menu li.mega-menu > ul > li > a:first-child {
		border-bottom: 1px solid #75adde;
		font-weight: bold;}

/* sub-menu items - 2nd level */
	.nav li li li a {
		font-size: 13px;}

	#top-menu li li a {
		padding: 0px 5px;
		font-weight: 300;}

/* drop down menu items on hover */
	.nav ul li a:hover {
		opacity: 1;
		background-color: #88bae6;}

 

 

Notes

If you want to change the width of the Mega Menu and the basic Sub Menu, just modify this part of the css.

007 compact mega menu

 

If you want to change the font-size, line-height and font-weight, just modify these parts of the css.

008 compact mega menu

 

This CSS tells each Mega Menu to line up to the right when you are using the default header layout:

012 compact mega menu

 

This CSS tells the Mega Menu to line up under it’s parent when using the centered header layout:

013 compact mega menu

 

And this CSS tells the very last Mega Menu to line up at the left of the page container so that it does not flow over to the right beyond the page width.

014 compact mega menu

 

If the Mega Menu is too far to the right for some of the menu items, you can either increase the width as shown above of add some right margin here.

009 compact mega menu

 

If you want to change the color of the category title bottom border in the sub menu, you can change it here:

010 compact mega menu

 

If you want to change the background color of the menu item when you hover over it, you can change it here:

011 compact mega menu

 

And that’s it.

If you used this on one of your projects, please share a link below so we can see how you used it.

Have fun!


Well that’s all for now. I hope you find this article useful.


STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest