Mega Menu Navigation for Genesis Themes using CSS

Sometimes the usual WordPress dropdown 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 mega menu for Genesis themes using only CSS.

Tutorial Overview

This tutorial has been updated so that you can choose the order of the menu items to be either horizontal, or now, vertical too. Changes are also included for the mobile-first Genesis themes.

This tutorial was originally for Genesis themes that include the accessible navigation menu, and the CSS was for desktop-first themes. I’m using the 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 dropdowns. 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, if your theme is NOT mobile-first. 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.

Step 0. How to Tell Which CSS to Use for Your Genesis Theme.

Does your theme include accessible menus?

If you look in your theme’s functions.php, and search for “accessibility”, you’ll see a section that looks like:

// Add Accessibility support.
add_theme_support( 'genesis-accessibility', array( '404-page', 'drop-down-menu', 'headings', 'rems', 'search-form', 'skip-links' ) );

Note the inclusion of “drop-down-menu”.

OR you will see this line:

// Adds support for accessibility.
add_theme_support( 'genesis-accessibility', genesis_get_config( 'accessibility' ) );

Is your theme mobile-first or desktop-first?
Look in your style.css at the Media Queries section.

Your theme is mobile-first (Genesis 2.6 and higher), if you see a min-width:
You can skip Step 4. of the tutorial.

@media only screen and (min-width: 960px) {

Your theme is desktop-first (Genesis less than 2.6), if you see a max-width:
You will need all steps of the tutorial.

@media only screen and (max-width: 1340px) {

Get All the Code

All of the code is on GitHub in this Gist .

If you look in your theme’s functions.php, and search for “accessibility”, you’ll see a section that looks like:

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.

<?php // Do not add this line

// 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;
}

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 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 {
	margin: -56px 0 0 199px;
}

Note that the numbers may be different, depending on your theme.

Just below the selector above, add:

/* Added for Mega Menu */
	.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 */
		column-count: 3; /* optional to change the order of the items to be vertical */
		column-gap: 0; /* optional to change the order of the items to be vertical */
	}
	
	.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 */
	}

Explanation of CSS

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

• background-color: 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.
• border: A border around the entire sub-menu is optional.
• height: A height is needed for the drop down.
• width: The width can be whatever you need for your menu. You need a few extra pixels because there is space between the menu items.
• column-count: This is needed only if you want to have them menu item order be vertical; without this the menu item order will be horizontal.
• column-gap: This is needed only if you want to have the menu item order be vertical.
• .genesis-nav-menu .megamenu.move .sub-menu The “move” class is optional and discussed below.
• border: 0; You can remove the border on sub-menu items.
• width: 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, as in the image below. 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 at the top of the tutorial. 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 4. Add CSS for Mobile Menus – Only Desktop-First

This only needs to be added for themes that are desktop-first.

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 {
			column-count: 0; /* optional if added above */
                        overflow: hidden;
			width: 100%;
	}

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

Let me know how this tutorial works for you to add a mega menu to your Genesis Theme or contact me for a small project to add the mega menu for you.