Skip to main content
The Nav Menu widget prints a WordPress menu with dropdowns, one of seven hover effects and a mobile slide panel. Any menu item can open a Mega Menu: a full Elementor template designed in the Theme Builder and assigned to the item under Appearance → Menus.

​
The Nav Menu widget

Found under Site in the widget panel.
  • Menu: the theme’s default menu, or a specific one. The default is the Kit’s own Primary Menu location, which it registers on every theme, falling back to the first location that has a menu assigned.
  • Alignment: left, centre (default) or right, with a separate mobile value.
  • Hover effect: None, Underline (default), Button, Magnet, Focus, Flip, Button + Flip. Each has its own style controls (underline height, button height, transition speed).
  • Dropdown icon.

​
Mobile menu and panel

  • A different menu for mobile, if you want one.
  • Breakpoint: any active Elementor breakpoint (default: tablet, under 1024 px), none, or a custom pixel width.
  • Toggle style: five hamburger styles.
  • Panel design: full screen or compact. The full-screen panel shows a logo: the site logo, the light logo, or a custom text or image.
  • Panel buttons: a primary button (on by default, “Contact Us”) and a secondary one, stacked or side by side, each with icon, alignment and full styling.

​
Style

Menu items in normal, hover and active state; dropdowns; the hover effect; the mobile panel and its menu; the toggle button (width, height, line height and gap); the two panel buttons. The Kit registers two locations on every theme, Primary Menu and Mobile Menu, so a header built with the Nav Menu widget works the same on any theme. Assign a menu to Primary Menu under Appearance → Menus → Manage Locations. When Bevel MCP builds a header, it creates a menu and assigns it there.

​
Mega menus

  1. In Bevel → Theme Builder, create a template of type Mega Menu. It is designed on a blank canvas, at the width you choose under Settings → Layout: full width, the site’s container width (default), auto, or a custom width (default 1200 px).
  2. Under Appearance → Menus, open the Mega Menu box in the left column. It lists only mega-menu templates. Add one to the menu.
  3. The item has its own URL field (default #). Set it if the parent item should also be a link.
The Nav Menu widget opens the template as the item’s dropdown at the template’s width. A mega menu has no display conditions; the menu is where it shows.