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.
In that widget, Style → Indicator adds an underline or a pill that sits under the current page’s item and slides to whichever item the pointer is on, staying on an item while its panel is open.
Its Style tab styles the menu’s panels in four parts. Dropdown is the box (width, padding, gap between items, background, border, radius, shadow) and Dropdown Items its links (typography, padding, radius, hover speed, icon size, and normal and hover text, background, icon colour, border and shadow, each with a dark-mode colour). Mega Panel and Mega Items have the same controls for mega menus; anything left empty there follows the Dropdown look. Panels have no border unless you set one. A mega panel built from a Custom Template is styled in that template.
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. Scale up scales and nothing else — if you want the panel to travel as it opens, pick one of the slides. |
| Stagger Content | Reveal the panel's content in sequence instead of all at once. |
| Stagger What | Whole panel content treats the panel as one block. Per element reveals each item you mark with the nk-stagger class, one after another. |
| Stagger Animation | How each element arrives: None (a fade in sequence, no movement), fade with a slide up, down, left or right, or fade with a blur. |
| Stagger Delay | Milliseconds between each element. 60ms by default. |
| Switch Animation | How content changes when moving straight from one open panel to another: Slide, Fade, Blur, Slide + Blur or Fluid. 350ms by default. Fluid is one card that changes shape while its content crosses inside it, between dropdowns as well as mega panels, and follows the pointer with no hover delay once a panel is open. It is tuned for 250ms. On a Reveal header it can only morph between two panels on the sheet; moving on or off the sheet uses a plain change instead. |
| Panel Offset | Vertical gap below the edge the panel hangs from: the menu item, or the boundary for an item set to Flush with boundary. 0 is flush. |
| Alignment | How the panel lines up against its boundary. |
| Max Width | Caps the panel width on very wide screens. |
Staggering individual columns. Set Stagger What to Per element,
then open the panel's Global Block in Elementor and add the class nk-stagger to each
column or card you want revealed on its own — use the Classes field in the element's
Advanced settings. Mark nothing and the panel still staggers its own outermost blocks, so the
setting never does nothing at all.
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.
Every default can be overridden per item. Open a menu item's NovaKit options and you will find the same settings again — boundary, trigger mode, animation, panel appearance, overlay and its blur, all four stagger settings, hover intent delay, switch animation and duration, alignment, arrow, width and offset.
How "inherit" looks. Dropdowns carry an explicit Inherit choice at the top. Number fields inherit when left blank — they are not zero-means-default, because zero is a real value for several of them: a hover delay of 0 opens instantly, and an overlay blur of 0 dims the page without blurring it. Clear a field to go back to the default; type 0 to mean nothing at all.
The full list of those settings is in Theme Options → Header.