A mega menu replaces the standard dropdown with a full-width panel that can contain multiple columns, icons, images, and custom content. Avada has built-in mega menu support that works through the WordPress menu editor and Avada’s menu settings panel.
Step 1: Enable the Mega Menu Option in Avada
Go to Avada -> Theme Options -> Menu -> Main Menu. Enable “Mega Menu” for the menu you want to use. This activates Avada’s mega menu system for that navigation menu. Save the theme options before proceeding.
Step 2: Access Menu Item Settings
Go to Appearance -> Menus. Click on a top-level menu item to expand it. You will see a new “Avada Menu Options” section at the bottom of the menu item settings (you may need to enable “CSS Classes” and other advanced options from the Screen Options toggle at the top of the page to see these). In Avada Menu Options, set Mega Menu to “Yes” for this item. This menu item’s dropdown becomes a mega menu panel.
Need help with your WordPress site? Describe your project and get a free estimate.
Step 3: Set Up the Column Structure
Avada’s mega menu uses child menu items as columns. For each child item you add under the mega menu parent, set its Column number in the Avada Menu Options. Items with Column set to 1 go in the first column, Column 2 in the second, and so on. Items within the same column stack vertically.
A typical three-column mega menu: add six child items, set the first two to Column 1, the next two to Column 2, and the last two to Column 3. Avada automatically divides the mega menu panel into equal-width columns based on the highest column number you use.
Step 4: Add Column Headings
To create a heading for each column, add a menu item set as a column header. In the Avada Menu Options for that item, enable “Column Heading”. This item displays as a bold category label rather than a clickable link. Add a heading item at the top of each column before the child items in that column.
Step 5: Add Icons
Avada supports FontAwesome icons on mega menu items. In the menu item’s Avada Menu Options, find the Icon field and type the icon name (e.g., “fa-star”, “fa-home”). The icon appears to the left of the menu item label. Icons are optional but add visual variety to large mega menus with many similar-looking text items.
Step 6: Custom Width and Styling
In Avada -> Theme Options -> Menu, configure the mega menu background color, font sizes, and hover colors. For full-width mega menus, set the width to 100% of the page container. For narrower mega menus aligned to a specific parent item, configure the pixel width in the theme options.
Testing and Troubleshooting
After building your mega menu, test it in multiple browsers and on real mobile devices. Mega menus on mobile require special attention – the multi-column layout rarely works on phone screens. Avada automatically collapses the mega menu to a standard accordion list on mobile. Verify this collapse behaviour is working by testing on an actual phone, not just a browser’s device emulation.
If menu items are not appearing in the correct columns, go back to Appearance -> Menus and verify each child item’s Column setting. Items without a column number assigned default to Column 1, which can cause all items to pile into the first column. Also check the order of menu items – items in the same column should be sequential in the menu item list to ensure they group correctly in the Avada mega menu rendering.
Adding a Mega Menu With a Shortcode Widget
Avada’s mega menu supports a “Widget” column type where you embed any WordPress widget or shortcode directly in the dropdown. This is useful for adding a search box, a recent posts list, or a newsletter signup inside the mega menu. In the menu item’s Avada Menu Options, set the column type to “Widget” and paste a shortcode or select a widget to display. The widget renders inside the mega menu panel when the dropdown opens.
A search box in the mega menu is a practical addition for large sites – visitors can search without leaving the current page. Use the standard WordPress Search shortcode or a shortcode from your search plugin (SearchWP, Ivory Search) in the widget column.