Nav Menu Addon

Nav Menu Addon is a premium feature available with Astra Pro Version 1.6.0 and above. This addon provides mega menu functionality.

Here is walkthrough video made by WPBuilders.

To activate the Nav Menu addon, from the WordPress dashboard navigate to Appearance > Astra Options > Nav Menu and click Activate.

You need to enable mega menu functionality for the top-level menu item whose child menu items you would like to turn into a mega menu. Below are the steps that explain how to create a mega menu.

Step 1. From the WordPress dashboard, navigate to Appearance > Menus.
Step 2. Select a menu in which you want to add mega menu. From the selected menu click on the top-level/parent menu.
Step 3. Click on Astra Menu Settings button.

Below are the options available –

  • Mega Menu
    • Enable Mega Menu: Tick the checkbox for Enable mega menu option. This will enable mega menu options for all submenus of the parent menu.  It provides options for top-level/parent menu. You can set Mega Menu width to content, menu container or full.
  • Background / Image
    • Background Color/ Background image: Background color / Image will be set to the mega menu box for the parent menu. You can adjust the background image with settings like Background Repeat, Background Size, Background Position.
  • Override Colors for this mega menu?
    • You can set colors for the menu items present in the mega menu box for parent menu. Available options are Text/Link Color, Text/Link Hover Color, Column Divider Color.
  • Highlight Labels
    • This is the text that appears beside the menu item. It highlights the menu. Labels can be Free, Sale, New, Featured etc. You can set label text and color.

Step 4. Clicking on the child menu you will get the following options –

  • Mega Menu
    • Make column heading?: Choose if you want to make the menu item navigation label as a title for the column. So that this will appear as a title and all child menu items will appear below this heading.
  • Menu Label
    • Hide Menu Label/Description?: If you wish to hide the label or description for the submenu, tick this option.
    • Disable Link: This option will remove the link for a respective menu item. It will display only the title of the menu.
  • Content Source
    • You can select Content Source for the submenu. It has the option to select from Custom Text, Template or Widget. You can display custom text/HTML with the editor, or can select any custom template/widget. If you select the Custom Template option, list of all available posts, pages, custom templates will appear. If you select the widget option, list of all available widgets will appear.
  • Highlight Labels
    • This is the text that appears beside the menu item. It highlights the menu. Labels can be Free, Sale, New, Featured etc. You can set label text and color.

In a similar way, you will find options for all submenu and their submenu.

How to create columns for the mega menu?

Astra will automatically create a separate column for each submenu. When you tick option Enable Mega Menu within the Parent menu item, it will create columns depending on the number of submenu items present under it.

For Example – If you have the following menu structure:

  • Background Image
    • BUSINESS PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • AGENCY PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • UTILITY PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4
    • SPECIAL PAGES
      • Menu Item 1
      • Menu Item 2
      • Menu Item 3
      • Menu Item 4

It will display in the front end as –

How to add a template to Mega Menu?

Edit the first child menu item of the mega menu. From the Content Source select the Template. From the template list select the appropriate template.

Note – This is available only on first children of mega menu.

Output –

Not the solution you are looking for? Check other articles, or open a support ticket.