Quick answer: An Enfold mega menu turns one top-level item into a full multi-column panel: in Appearance → Menus, tick Use as Mega Menu on the parent, and each child becomes a column heading with its own links beneath — columns, widths and icons arranged entirely from the menu screen, no code. It is the right pattern when a plain dropdown cannot show the breadth of a site (course hubs, tutorial libraries, multi-topic catalogs). For the single-level pattern, compare the Bootstrap navbar guide.
Building one, step by step
- Open Appearance → Menus and select your main menu (enable Description and CSS Classes under Screen Options if hidden).
- Pick the anchor item users will hover — “Tutorials” or “Courses” — and tick Use as Mega Menu in its settings box.
- Add children one level down: each becomes a column heading. In its settings choose the Mega Menu Column width (1/1, 1/2, 1/3, 1/4) and whether it starts a new row.
- Hang grandchildren beneath each heading — they render as the link list inside that column.
- Add icons and styling from each item’s settings; set panel width to Fullwidth for edge-to-edge panels on wide headers.
- Save, purge caches, verify in a private window — theme and server caches are the usual reason a configured panel “doesn’t show.”
Design rules for menus people can scan
| Rule | Why |
|---|---|
| 3–5 columns maximum | Wider panels outrun the hover corridor and lose the pointer |
| Column headings are destinations too | Make the heading a real link to the hub page, not a dead label |
| ≤7 links per column | Scannability collapses past ~7; deeper lists belong on the hub page |
| One icon set, one size | Mixed icon styles read as different menu levels — a classic confusion |
| Order by audience task, not org chart | Users scan for their goal; internal taxonomy comes second |
On mobile, Enfold flattens the panel into the standard drawer automatically — but deep grandchild hierarchies can bury key pages, which is the argument for keeping panels exactly two levels deep. The information-architecture logic mirrors the CSS-based patterns in our Materialize mega menu guide and the Materialize sidenav guide; the markup beneath any navigation follows the structure in the semantic HTML landmarks guide.
For one-to-one WordPress and theme training — menus, templates and site architecture — Ampersand Academy teaches WordPress development one-to-one.
Frequently asked questions
How do I enable the mega menu in Enfold?
Appearance, Menus: expand the top-level menu item and tick Use as Mega Menu under its Mega Menu settings. Child items then become column headings and grandchildren become links inside each column.
How do I control mega menu column widths?
Each first-level child has a Mega Menu Column setting with fractions – 1/1, 1/2, 1/3, 1/4 – plus a new-row toggle. Mixed widths let you feature one wide column beside several narrow ones.
Can I add icons to Enfold mega menu items?
Yes – the menu item settings include icon options for column headings and links. Keep one icon style and one size across the whole panel for a consistent look.
Does the Enfold mega menu work on mobile?
It collapses into the standard mobile menu automatically. Because deep hierarchies flatten awkwardly, keep panels two levels deep and make every column heading a real link to its hub page.
Why is my mega menu not saving or appearing?
Save the menu itself, then check that the item sits directly under the mega-menu parent and the theme options are saved. Cache layers – theme, plugin or server – are the usual final culprit; purge and test in a private window.