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.
- From your WordPress dashboard, go to Appearance > Menus.
- Click on 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.
*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.
17 responses to “Mega Menu Navigation for Genesis Themes using CSS”
Hey Marcy,
Great tutorial! Really simple. I’ve got it working except for one thing, my theme doesn’t use the .js responsive code, it just uses CSS for the mobile menu. It works for my “attorneys” menu item, but something with the “practice areas” is wonky. I thought it might be because I was using a # instead of a page, but that didn’t make a difference. I’ve dug around in the CSS and can’t figure it out. Any ideas? My site is under development
Thanks!
This mega menu method won’t work for your theme then; it’s only for the newer Genesis themes. You may need to use a plugin instead for your menu to work.
Thanks, I got it to work, Marcy. I’m using the Divine theme. I’m bookmarking this page because it’s so easy!
Great to know which theme, Fran; I’m glad it worked!
It worked beautifully, thank you Marcy. You saved me quite a bit of time.
Glad to help, Leah!
Thank you Marcy, this was a life saver! xo
Glad it worked for you!
Hello,
Does this mega menu work with monochrome pro?
the mega menu should work fine with the Monochrome Pro theme. Go ahead and try it.
Hello Marcy,
great Tutorial. Many thanks for that :-). I have a question: I want to highlight the first menu point in my mega menu, like this:
Topic
-Subtopic
-Subtopic
-Subtopic
Is that possible?
Many thanks
-Fabian
You would use something like:
.genesis-nav-menu .megamenu {
background-color: gray;
}
OR
.genesis-nav-menu .megamenu a {
background-color: gray;
}
I don’t have one set up to see, and it would depend on how you’ve added some other styles. The first one should work though.
Thank you!! Great tutorial!!
Hi,
Can wwe have this menubar pattern by ARIA on genesis framework sample theme?
http://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html
It’s probably best if you ask that question at https://my.StudioPress.com. Login to your account and submit a support ticket.
This works great, however I need something like the following:
Topic Topic Topic
-Subtopic -Subtopic -Subtopic
-Subtopic -Subtopic
-Subtopic
Topic Topic
-Subtopic -Subtopic
-Subtopic
Is this easily achievable with your code above?
You may be able to do that by combining with this tutorial
https://amethystwebsitedesign.com/add-expanded-primary-navigation-menu-to-genesis-footer/
But it’s not something I plan to add to this tutorial.
There is also this tutorial that is closer to what you want for using with Genesis themes.
https://sridharkatakam.com/mega-menus-genesis/