How to create a mega menu in Genesis - Freelance Wordpress developer Melbourne | Sydney | Gold Coast

Sometimes you will want alot of menu items for your WordPress site, but they won’t all fit onto the screen. There are heaps of mega menu plugins, but styling a multi-column mega menu for Genesis themes with only CSS is very doable with some minor modifications.

These options are specific to Genesis themes that include the accessible navigation menu, and the CSS was intended for themes that prioritise desktop display. I always use genesis sample theme, as opposed to pre built genesis themes, but these classes should work on most Genesis themes.

You will use a CSS class to specify which menu elements function as mega menu dropdowns. This allows the flexibility of having some normal menu items and some mega menu items. If your theme is NOT mobile-first, you will add a function to functions.php to limit the menu’s depth before adding CSS for the mega menu on large and small displays. You can determine how many columns your menu items require. Obviously, additional colour schemes can always be added.

How to edit the CSs file in your Genesis theme.

If you are logged into the WordPress dashboard, you can go to appearance – theme-file-editor and edit the files there. Make 100% sure you have a backup of your site, and even better yet, clone you site to a staging domain and work there.

If you search for “accessibility” in your theme’s functions.php file, you will find a section that appears like this:

Restrict the sub menus to a single level.

The first thing you should do is restrict submenus to a single level. Thus, you will have a total of two menu levels: the visible main level and one sub-menu. We are adding two levels to the primary menu. In the prototype theme, the depth of the secondary menu is already limited to 1.

If you are the only user of your website and you limit your mega menu items to two levels, you can omit this step.

Add the code below to your functions.php file. The end is acceptable. Utilise a text editor and make sure to create a backup before making any changes.

<?php // Do not include this

// Reduce the depth of the principal navigation menu to two levels.
add_filter(‘wp_nav_menu_args’, ‘genesis_sample_primary_menu_args’);if (‘principal’ does not equal $args[‘theme_location’) { return $args; }$args[‘depth’] equals 2return $args; }

Add the Mega menu class to the menu items

You’re going to add a class to the menu items that you want to behave as mega menu items.

Inside your WordPress dashboard, go to Appearance > Menus.
Select one of the top level menu items that you want to use as a mega menu.
In the CSS Classes field*, add megamenu.
Save the menu.

Add CSS for desktop

You’’re going’ll need 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 */
	}

Add media queries for mobile and ipad

As I mentioned I use Genesis Sample, but use the pre built defaults to build your media queries. In Genesis Sample this is 380px for mobile and 780px for ipad, but you can edit these in your core theme.scss file, or if you re using a modern WordPress stack your theme.json file.

Need help with youe Mega Menu? Please get in touch.

Jane James is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart. Have a project in mind? Contact me here.

Additional menu