How To Use The Mega Menu Widget By Atomic Addons

The Mega Menu widget by Atomic Addons shows one of your WordPress menus as a navigation bar for your header. Menu items can open ordinary dropdowns or mega menus: wide panels you design in Elementor with any widgets, such as columns of links, images and buttons. On phones and tablets the bar turns into a hamburger button that opens the menu in a dropdown or in a side panel. This guide covers how the widget works with the Mega Menu Builder feature, adding it and its settings.

The Widget and the Mega Menu Builder Feature

The mega menu is set up in two places that work together:

• The Mega Menu Builder feature works on the menu itself, under Appearance → Menus: it adds a Mega Menu switch to each menu and an Edit button to each top-level item, where you turn on the item's dropdown panel, design the panel in Elementor and add a badge or icon to the item.
• The Mega Menu widget displays that menu on your site and decides how it behaves: direction, how the panels open and animate, the mobile menu, and the styles.

The widget needs the feature: while Mega Menu Builder is off, the widget shows only a reminder in the editor and nothing on your site. Menus shown by your theme or by other widgets keep their normal dropdowns; only this widget shows the panels. The Mega Menu Builder guide covers the menu side step by step.

Enable the Mega Menu Widget

Mega Menu is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Mega Menu. You can also open the Menu / Navigation category.

4. 4

   Turn the Mega Menu widget on.

5. 5

   Click Save Settings.

Then turn on the feature: go to Atomic Addons → Features, switch Mega Menu Builder on and click Save Settings.

Prepare the Menu

Go to Appearance → Menus, create or pick a menu, turn on its Mega Menu switch and click Save Menu. Then use an item's Edit button to give it a dropdown panel (Enable Dropdown, then Edit Dropdown Content), a Dropdown Width of Default, Full or Custom, a badge or an icon. The Sub Menu widget is made for these panels: a grid of links with icons, sub titles and badges.

Items without a panel work as usual: their sub items open in a regular dropdown. Badges and icons appear only while the menu's Mega Menu switch is on.

Add the Mega Menu Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Mega Menu. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

The widget usually goes in your header template. It isn't offered while you design a dropdown panel itself. Until a menu is picked, the editor shows a hint and visitors see nothing.

Layout

Open the widget and go to Content → Layout:

1. 1

   Select Menu: The WordPress menu to show.

2. 2

   Menu Direction: Horizontal, the default, for a menu bar; panels open below the items. Vertical for a side menu; panels open beside the items.

3. 3

   Alignment: With Horizontal: places the items at the left (the default), center or right of the bar, per screen size.

4. 4

   Display Menu as a Toggle: With Vertical: hides the menu behind a button that opens it as a dropdown, as in a “Browse Categories” menu on a shop. Off by default.

With Display Menu as a Toggle on, more settings set up the button and its dropdown:

1. 1

   Show Bar Icon: Three bars at the start of the button. On by default.

2. 2

   Show Text / Text: The button's label, “Browse Categories” by default.

3. 3

   Show Arrows: An arrow at the end of the button. On by default.

4. 4

   Offset: The gap between button and menu, 10px by default.

5. 5

   Animation Type: How the menu appears, Fade by default (see Dropdown Settings for the list).

6. 6

   Animate Out: Plays the animation when the menu closes too.

7. 7

   Duration / Delay Hide: The animation's length (200 milliseconds by default) and the wait before the menu closes after the pointer leaves (800 by default).

8. 8

   Trigger Type: Open the menu on Click (the default) or on Hover.

Dropdown Settings

Content → Dropdown Settings applies to the panels and dropdowns of all items:

1. 1

   Offset: The gap between an item and its panel: 10px on desktop and 5px on phones by default, up to 300px.

2. 2

   Animation Type: How panels appear: Fade (the default), Scale Up, a slide from one side in three distances, Kenburns, Shake, or a reveal from the top, bottom, left or right.

3. 3

   Animate Out: Plays the animation when a panel closes too.

4. 4

   Duration: The animation's length, 200 milliseconds by default.

5. 5

   Delay Hide: How long a panel stays open after the pointer leaves, 800 milliseconds by default.

6. 6

   Trigger Type (Desktop): Open panels on Hover (the default) or on Click. The mobile menu always opens on tap.

Hamburger Menu

Content → Hamburger Menu sets up the mobile version of the menu:

1. 1

   Breakpoint: Where the bar turns into a hamburger button. Mobile (> 767px), the default, shows the button on screens 767px and narrower. Tablet (> 1024px) shows it on screens 1024px and narrower. None never shows it; the bar wraps onto more lines instead.

2. 2

   Mobile Menu Type: Hamburger Menu, the default, opens the menu in a dropdown under the button; items with a panel or sub items open in place like an accordion. Offcanvas opens the menu in a panel at the side of the screen.

3. 3

   Alignment: Places the hamburger button at the left (the default), center or right.

The button changes to an × while the menu is open, and the Escape key closes the dropdown.

Offcanvas

With the Offcanvas mobile menu type, Content → Offcanvas sets up the side panel. Items with a panel or sub items open and close in place when tapped.

1. 1

   Logo Image: An image at the top of the panel, such as your logo. Empty by default.

2. 2

   Overlay: Darkens the page behind the panel. On by default.

3. 3

   Animations: Slide (the default), Push, Reveal or None.

4. 4

   Flip: Opens the panel from the right instead of the left.

5. 5

   Close Button / Close Button Text / Close Button Align: An × button at the top of the panel (on by default), optional text beside it, and its position: left, center or right.

6. 6

   Close on Click Background / Close on Press ESC: Close the panel when the visitor clicks outside it or presses Escape. Both on by default.

7. 7

   Width / Height: The panel's size, per screen size. Hidden for Push and Reveal.

8. 8

   Select Template: A saved Elementor template shown under the menu, such as contact details or social icons.

Style the Mega Menu

Everything below is on the Style tab. Sections for settings you aren't using are hidden.

• Vertical Menu and Toggle Button — with the Vertical direction: the menu's box, and the toggle button with its Normal and Hover states.
• Menu Items — the top-level items in Normal and Hover/Active states: text and arrow colors, background, border, radius, padding, margin, spacing between items, alignment and typography, and Hide Dropdown Arrows.
• Dropdown — the panels and dropdowns: item background, padding, margin, border, radius and shadow, and under Classic Submenu the colors, border, padding and typography of regular dropdown items, with a Hover state.
• Hamburger Menu — the hamburger button (icon color, background, border, radius, padding, margin and Toggle Icon Size, with a Hover state) and the mobile dropdown's Dropdown Height.
• Offcanvas and Offcanvas Menu — with the Offcanvas mobile menu: the panel and its menu items.
• Badge — the item badges' position (Offset (X) and Offset (Y)), border, radius, padding and typography. Their text and colors are set per item in the menu.