Updated on 31 May 2022
In the members-only forum, a user asked:
Is there a good way to create a Genesis mega menu without using a plugin (such as UberMenu, which is great but very resource-intensive)?
Ideally, I'm looking for a solution that is primarily CSS-based, where a client can use the regular WP Menu page. If a submenu (child) item has its own child (ie third-level deep), then the second-level item should become a column header of the mega menu, with the third-level items in a list below it. Any ideas? Many thanks!
In this article, I share the CSS for displaying third-level submenus in columns with the second-level menu items as column headings in a mega menu upon hovering on a top-level menu item in Genesis.
While the tutorial has been written for Genesis Sample 3.4.0 and Genesis 3.3.3, it should work with a few adjustments in any Genesis theme.
Note: For a flexible and complete mega menu, you might want to use a plugin like Max Mega Menu.
Step 1
Edit your nav menu(s) at Appearance > Menus and structure the menu to have 3 levels.
Click on Screen Options near the top right and tick "CSS Classes".
Add mega-menu class to the 1st level menu item(s).
Step 2
Add the following in child theme's style.css at the end or in the Customizer > Additional CSS:
