Cacher is the code snippet organizer for pro developers

/* --- Step 4. Add CSS for Mobile Menus

Again you’re going to add some styles to your style.css file.
In style.css, look for the section where the mobile menu is added. In Genesis Sample, it’s @media only screen and (max-width: 1023px). Find the following selector .js .genesis-nav-menu .sub-menu .sub-menu

--- */

.js .genesis-nav-menu .sub-menu .sub-menu {
		margin: 0;
	}
	
/* --- Below it add: --- */
.genesis-nav-menu .megamenu .sub-menu {
			overflow: hidden;
			width: 100%;
	}

	.genesis-nav-menu .megamenu .sub-menu a {
		width: auto;
	}

Explanation of CSS

You can adjust all these to make the sub-menus appear as you like.

• To the sub-menu selector, you want to use the same background-color as the selector – .genesis-nav-menu .sub-menu a. This will give it a uniform background, especially if your menu items don’t make even columns.
• A border around the entire sub-menu is optional.
• A height is needed for the drop down.
• The width can be whatever you need for your menu. You need a few extra px because there is space between the menu items.
• The “move” class is optional and discussed below.
• You can remove the border on sub-menu items.
• The width of each item is 1/3 (3 columns) or 1/2 (2 columns) the total width of the sub-menu, 600px + 10px for the tutorial.

Explanation of the Move Class

By default, the mega menu drops down directly below the top level menu item. This is great for menu items on the left, but for large menus, the drop downs for menu items on the right may be cut off. You can see the right-aligned position in the image below. You can add an additional class, so you can choose to shift only some of the sub-menus, maybe the last one or two items. You would just add – megamenu move – to the CSS Class field those menu items, instead of just – megamenu – under Appearance > Menus.

/* --- Step 3. Add CSS for Larger Screens

You’re going to add some styles to your style.css file now. Use a text editor and be sure to save a backup first.
In style.css, find the following selector .genesis-nav-menu .sub-menu .sub-menu {  --- */ 

.genesis-nav-menu .sub-menu .sub-menu {
	margin: -56px 0 0 199px;
}

/* --- Just below the selector above, add --- */
.genesis-nav-menu .megamenu .sub-menu {
	background-color: #fff; /* same color as .genesis-nav-menu .sub-menu a */
	border: 1px solid #eee; /* optional */
	height: auto;
	width: 610px; /* make width needed plus 10px */
}

.genesis-nav-menu .megamenu.move .sub-menu {
	right: 0;
} /* optional to right align the sub-menu */

.genesis-nav-menu .megamenu .sub-menu a {
	border: 0; /* optional */
	width: 200px; /* 1/3 width for 3 columns */
	/* width: 300px; /* 1/2 width for 2 columns */
}

Step 2. Add Megamenu Class for the Menu Items
You’re going to add a class to the menu items that you want to behave as mega menu items.

1. From your WordPress dashboard, go to Appearance > Menus.
2. Click on one of the top level menu items that you want to use as a mega menu.
3. In the CSS Classes field*, add megamenu.
4. Save the menu.
*If you don’t see the CSS Classes on your menu items, click on Screen Options in the upper right hand corner of the Menu screen. Add a check to CSS Classes.

// Step 1. Limit the Navigation Menu Depth to 2 Levels

// The first thing you want to do is limit the sub-menus to only one level. So you’ll have a total of two menu levels – the top level that’s visible and one sub-menu. We’re adding a depth of two for the primary menu. In the sample theme, the secondary menu is already limited to a depth of 1.

// You can skip this step if you’re the only one using your website, and you remember to limit your mega menu items to just two levels.

// Add the following to your functions.php. At the end is fine. Be sure to make a backup first, and use a text editor.

// Reduce the primary navigation menu to two levels depth.
add_filter( 'wp_nav_menu_args', 'genesis_sample_primary_menu_args' );
function genesis_sample_primary_menu_args( $args ) {

	if ( 'primary' != $args['theme_location'] ) {
		return $args;
	}

	$args['depth'] = 2;

	return $args;

}

Sometimes the usual WordPress drop down navigation menu doesn’t quite work because the number of items is too long. You can use any of the popular mega menu plugins, but it’s quite simple to style a multi column or mega menu drop down navigation for Genesis themes using CSS.

Tutorial Overview

This tutorial is for the the newer Genesis themes with the accessible navigation menu. I’m using the latest Genesis Sample theme, but you’ll be able to use this tutorial on other themes too.

You’re going to use a CSS class to define which menu items will act as mega menu drop downs. This allows you to have some normal menu items and some mega menu items; it allows for flexibility. You’re going to limit the depth of the menu first by adding a function to your functions.php, and then you’ll add the CSS for the mega menu on large screens and smaller screens. You can decide on the number of columns you need for your menu items. Of course, you can always add additional color styles, as well.