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 2.3.0, it should work with a few adjustments in any Genesis theme.
Step 1
Edit your nav menu(s) at Appearance > Menus and structure the menu to have 3 levels.
(click to see bigger version)
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:
great tutorial as always but I wonder how it works on mobile.
Do you have a dev site we can check?
thnx!
There will be no change in the mobile.
All the CSS has been wrapped inside a media query which tells the browser to load it only on desktop/larger screen widths when there is no hamburger menu item.
That width value in the media query needs to be adjusted depending on the active child theme.
Sridhar, thank you for this fantastic CSS. I’ll be using this on many sites moving forward.
One change that I had to make to get it functional (for Simple Passive Income Pro, not sure if the CSS conflict was with original theme or some of my own custom CSS):
/* the mega menu /
.mega-menu > .sub-menu {
width: 780px; / OK to set pixel width */
}
Either you can set a width or set max-width with width set to 100%.
It should typically be the value of the width of wrap.
Hello Sridhar Katakam,
great tutorial, thanks.
I use Business Pro theme here https://test.vergleich24.at.
The theme uses display: none for sub-menu.
How can i remove this?
Also the sub-menu sticks out of the window.
Thanks,
Alex
Hi Alex,
In the min-width 896px media query locate the style rules for
.sub-menuand remove this line:Let me know after you make this change so I can look into the other issue.
Hello Sridhar,
perfect. I remove the line with opacity: 0 !important.
Can you look into the other issue, please.
Best regards,
Alex
In the 1024px min-width media query, for
.mega-menu > .sub-menu, if you setright: 0;you can have the mega menu appearing to the left with the right edge matching with the right edge of the parent menu item.You might want to experiment with that.
Hello Sridhar,
how can I center the sub-menu?
Thanks,
Alex
Can you provide the URL of your site?
https://www.vergleich24.at
Inside the 1024 min-width media query, for
.mega-menu > .sub-menureplacewith
Great! Thank you!
Hi Sridhar! Great tutorial but I have some problems with the CSS of the mega-menu in a clean Genesis Sample 2.6.0 theme. All sections in the mega-menu appears one on top of the other.
Thanks!
Fer
Same for me.
Anyone have a fix?
Hi Sri…
Having issues getting the mega menu to render correctly on my dev site. I have a css issue I believe. Can you review at your convenience?
https://premiumhandpp.staging.wpengine.com/
Wow. Just wow. I literally copy/pasted, saved, and it worked. Looking fantastic. Thank you.
Hi Sridhar
Thanks for this code, its working well, but I have a slight issue I’ve not been able to work out and hoped you might be able to help.
I’m using News-Pro as the theme and I essentially just copied your code. It works as expected, but when you load the page, any page the menus (I have 2 megamenus) open up for a second then disappears, also for a few seconds if you roll over the area of the site where the menus would appear, not the buttons, the menu appears. It only does this once.
Any ideas what might be causing this?
Any help really appreciated.
Hi Sridhar, I’m having the same issue as Rutlandweb below. Upon a page load, when I hover over the area that will be used by the menu, it appears. This is very startling for users:
https://media.giphy.com/media/cnib1bosQ2o6hHoFvy/giphy.gif
Any possible fixes? Thank you!
Just wanted to bump this – any chance of finding a good solution? Thank you!