Build
Mega Menu
Turn any menu item into a full-width panel you design in Elementor.
A mega menu is a normal WordPress menu item with a designed panel attached. You build the panel as a Global Block, then point a menu item at it.
How the mega menu works #
Three pieces:
- A menuAn ordinary WordPress menu at Appearance → Menus.
- A panelA Global Block of type Megamenu, designed in Elementor.
- The link between themSet on the menu item itself, in NovaKit Menu Options.
The menu is drawn by the NovaKit Menu widget, so your header must contain one for any of this to appear.
NovaKit Menu Options #
- Open your menuGo to Appearance → Menus and select it.
- Expand a menu itemClick the arrow on the right of the item you want to turn into a mega menu.
- Click NovaKit Menu OptionsA panel opens with everything below.
- Turn the mega menu onThen choose its type, and save.
Per-item options #
| Option | What it does |
|---|---|
| Enable mega menu | Turns the panel on for this item. Off, it stays a normal dropdown. |
| Type | Columns lays the item’s own children out in a grid. Custom shows a Global Block you designed. |
| Columns | How many columns, from 2 to 6. Columns type only. |
| Content | Which Megamenu block to show. Custom type only. |
| Width | Full spans the window, Container matches your site width, Custom takes a pixel value. |
| Item as title | Makes this item a non-clickable heading — useful for a column label. |
| Badge | A small label beside the item, such as “New”. You can set its background and text colour. |
| Icon | An icon beside the label, with position and size. |
| Open in new tab | Adds target="_blank" to this item. |
| Mobile content | On small screens, show the designed template or fall back to a plain list of links. |
Animation and positioning #
Panels can be positioned per item, or left to the site-wide defaults.
| Setting | Options |
|---|---|
| Boundary | What the panel aligns to: Auto, Container, Full Window, or a Custom CSS selector you supply. |
| Trigger Mode | Hover (with an intent delay, 150ms by default) or Click. |
| Animation | Scale up, Fade, Reveal, Slide up, Slide down, or None. |
| Switch Animation | How content changes when moving straight from one open panel to another: Slide, Fade, Blur or Slide + Blur. 350ms by default. |
| Panel Offset | Vertical gap between the menu item and the panel. 0 is flush. |
| Alignment | How the panel lines up against its boundary. |
| Max Width | Caps the panel width on very wide screens. |
Hover intent, not hover. The delay stops panels flickering open as the pointer crosses the menu on its way somewhere else. Raise it if your menu feels twitchy, lower it if it feels sluggish.
Mobile accordion #
Mega panels do not open on hover on a phone. On small screens the menu becomes an accordion: tapping a parent expands its children in place.
Each item’s Mobile content setting decides what a mega item expands into — the designed template, or a plain list of its links. A panel built as a wide multi-column layout is usually better shown as links on a phone.
The mobile menu itself is drawn by the NovaKit Mobile Menu widget, which you place in your header alongside NovaKit Menu.
Site-wide defaults #
Rather than setting boundary, trigger and animation on every item, set them once at Theme Options → Header → Megamenu Defaults. Every item inherits them; anything you set on an individual item overrides its default.
The full list of those settings is in Theme Options → Header.