1. Add the Widget
- In Elementor, drag the Advance Mega Menu widget from the panel into your header or desired section.
- Place it where you want the main navigation to appear (e.g. inside a header container).
2. Choose Menu Source (Content → General)
- Repeater (build here): Build the menu entirely in the widget using Menu Items. No WordPress menu required.
- WordPress menu: Use an existing menu from Appearance → Menus. Select the menu in the WordPress menu dropdown.
3. Build Menu Items (Content → Menu Items)
When Menu source is Repeater:
- Click Add Menu to add a top-level item.
- For each item, set Menu Type:
- Simple Menu: Single link, no dropdown.
- Dropdown Menu: Simple list of sub-items. Add links in Dropdown Sub-items.
- Mega Menu: Large panel with one of 6 layouts. Configure layout, categories, and submenu items.
- Use Load dummy data into menu to pre-fill demo menus and then edit as needed.
4. Mega Menu Layouts (when Menu Type = Mega Menu)
- Layout 1: Blocks & Widgets — Category tabs + submenu list + featured content and CTA.
- Layout 2: Features — Hero + grid of cards.
- Layout 3: Solutions — Category pills + solution cards with tags (Popular, NEW).
- Layout 4: Posts — WordPress posts in a card grid.
- Layout 5: Pages — WordPress pages in a card grid.
- Custom — Select an Elementor page; its content appears as the mega panel.
5. Categories & Submenu Items (Layouts 1, 2, 3)
- Categories: Add filter tabs. Each has a unique Category ID (e.g.
ai, layout).
- Submenu Items: Add blocks/cards. Set Title, Description, Link, and Category.
6. Trigger (Content → General)
- Hover — Panel opens on mouse hover.
- Click — Panel opens on click.
7. Styling (Style tab)
Use the Style tab for Panel, Panel Header, Category Tabs, Submenu, CTA bar, Dropdown, and Menu Item styles.
8. Quick Tips
- Category IDs must match between Categories and submenu item Category.
- Mega panel is centered; simple dropdowns open under their parent item.
- On mobile, the menu collapses to a hamburger.
