Mega Menu (Desktop)

Mega Menu hero image

The Mega Menu widget is a an extremely powerful menu system capable of building flexible custom navigation menus. Multi-level dropdowns allow for easy organization of sites with large page counts. Fully customizable columns provide ease of grouping categories, while icons and image cards add visual interest.

With a set of features and options exceeding any other widget in our library, this widget is built with flexibility in mind. Consider using this widget when the standard Navigation Links menu lacks the functionality needed for your menu.

Preview: Mega Menu

Notes:

This document covers the standard Mega Menu widget, intended for desktop use. For mobile, you may use the Mega Menu Mobile widget or use the default mobile menu.

This document explains the function of the settings in the widget menu. To see specific setup demonstrations, see our series of demo walkthrough videos:

Demo Walkthrough A: Full Width Menu with Columns, Headers and Icons

Demo Walkthrough B: Features Dropdown with Image Cards

Demo Walkthrough C: Locations Dropdown with Contact Details and Social Icons

Tutorial Video

Setup

WIDGET PLACEMENT

This widget should be placed in the header, unless you intend to have separate instances of your menu on separate pages. By placing in the header, the menu will appear globally throughout your site.

When you first drop the widget on your site, you will notice that it is auto-populated with all of the pages on your site – very similar to the standard Navigation Links menu widget. Any newly added pages will also appear in the Mega Menu widget. And as you re-order pages (in the builder sidebar menu), the pages will be re-ordered in the menu.

GLOBAL WIDGET OPTIONS

When you open the widget option panel, you will notice the title at the top: “Global Menu Configuration.” These settings apply to all settings in the menu. In the next section (below this section), we will discuss Menu Item Overrides. It is important to note that Menu Item Override settings override the global settings discussed in this section. This allows you to have greater flexibility and customization power.

  • Dropdown Mode: This determines the behavior of dropdowns in the menu. Predefined Width allows you to manually control the width. Full Width makes the dropdown span the entire width of the browser.
  • Dropdown Width: Defines the width of dropdowns. This settings only applies when Predefined Width is selected in the Dropdown Mode.
  • Dropdown Content Alignment: This sets the alignment of the content within the dropdowns. Choose from Left, Center or Right.
  • Distribution Mode for Items in Columns: You may choose Automatic distribution or Manual distribution for content within columns. Choose Manual distribution if you need to control the items within columns, or if there are differing amounts of content within columns.
  • Child Item Columns: Set the number of columns to be displayed in the menu (1 – 5 columns)
  • Link Target: Choose to open links in the same tab or a new tab. Same tab is standard behavior for navigation menus.

MENU ITEM OVERRIDES

Menu Item Overrides work hand in hand with pages on your site.

It is important to distinguish the purpose of Menu Item Overrides and pages, as they pertain to menu items:

  • Pages are used to create menu items (such as headings, column separators or cards).
  • Menu Item Overrides are used to customize menu items.

When you add a new menu item override, you will see that that item has its own set of options in a new menu on the right, often identical to the options seen in the Global Menu Configuration panel on the left. As mentioned in the section above, menu item overrides indeed override global settings. For example, this could allow you to have multiple dropdowns with differing column counts.

For every menu item override, there must be a page created first – even for things that you can’t see, such as Column Separators. For more on this, see the  Adding Pages For Menu Item Overrides section below.

  • Click the Add Item Override link to begin adding item overrides. When you click on the newly added item, a new set of options will appear to the right.
  • Linked to page: If your item override should be linked to a page, use this setting to select the page. Leave this setting alone if you are adding an item that does not need to be linked, such as a Column Separator or Heading.
  • Item Type: Choose from Regular, Column Separator, Heading, Card, Social Icons or Contact Details. These are explained in detail below:
    • Regular: This is a standard menu item that can be placed in a column or as a child item in a dropdown.
    • Column Separator: These are used to separate columns in your menu. These are not standard menu items that will appear as links. They are simply used to define separation points for columns. To use Column Separators, create a new page, name it anything you like, and place it within the pages menu (click Pages in the builder sidebar menu) where you would like the separator to appear.
    • Heading: These are used to add header text to your menu. The most common usage would be titles for columns. Heading text in the menu is never linked to a page.
    • Card: These are typically used when you want to use images in your menu. For example, you may use multiple image cards as category headers within your menu columns.
    • Social Icons: Just as it sounds, this item type is used to display social icons within the menu.
    • Contact Details: Use this item type to display contact details within the menu.

When you’ve selected an item override, a new set of options will be displayed. Options differ for each item override type. You may note that these settings are the same as the settings explained in the  Global Widget Options section above. However, keep in mind that Menu Item Overrides do as they are titled – they override Global Menu Configuration settings.

Some item overrides may have additional settings such as image loaders or fields for title text. These are self-explanatory and behave as you would expect. When entering icon classes, use icon classes from the Font Awesome icon library. See the  Using Font Awesome Icons section below for additional information.

CONNECTING MENU ITEM OVERRIDES TO PAGES

To customize any item in your menu, you will need to create a Menu Item Override and specify the menu item you wish to customize.

In this example we will focus on the “Mens Clothing” and “Womens Clothing” menu items. As you can see in the screenshot below, these appear as standard menu items.

We will use Menu Item Overrides and the Linked To Page settings to turn these menu items into headers with bold titles.

  • Open the Mega Menu widget options.
  • Create a new Menu Item Override.
  • In the options menu that appears, click on Linked to page.
  • Select Mens Clothing.
  • Now any settings we make for this Menu Item Override will apply directly to the Mens Clothing menu item.
  • Click Item Type and choose Heading. This converts the Mens Clothing menu item into a heading. Headings are intended to create category titles within a menu, and are not displayed as clickable links in the menu. Remember that the Linked to page option simply links the menu item type to the menu item you wish to customize.
  • Repeat this process for any headers you wish to create.
  • To style our headers, we will open the Design panel in the widget options.
  • Open the Dropdown Heading Item Type menu.
  • Style the text as you like. In this case, we will increase the font size and bold the text.
  • All headers will have this styling applied.
  • Previewing in browser, we can see the header menu item type and styling applied to Mens Clothing and Womens Clothing.

PAGES AS MENU ITEMS

All menu items (such as headings, column separators or contact details) are created using pages. You will use the Pages menu in the builder sidebar menu to create and organize these.

You may wonder why we would use pages for this purpose. The reason is that the Pages menu provides the simplest way to organize the way that menu items are displayed. By organizing pages within the Pages menu, we can easily determine where things should go within the hierarchy of the menu.

As you will likely notice, many of the pages used as menu items are not pages at all (such as column separators). Pages that are used solely as menu items (such as column separators) will not be visited nor seen in site navigation. Pages like these should use the No Index option to ensure they are not indexed by search engines. See the  No-Index Pages section below for additional information.

In this example we will look at creating pages to use as Column Separators. In the screenshot below, you will see that all of the product categories are in 1 column in our Store dropdown. We will use the Column Separator menu item override to create four columns.

  • We’ll begin by creating three new pages in the Pages menu. Click Pages in the sidebar menu of the builder and click the Add Page button.
  • Name the page “separator 1” (or similar).
  • Column Separators go between columns; so we will need three Column Separators to create four columns. Repeat the above process to create three total pages.
  • Move the separator pages into position where you would like to create column separations.
  • You may notice that creating these pages has placed them into your navigation menu. Don’t worry – once you finish setting these up as column separators, they will disappear from your navigation menu.
  • Back in the Mega Menu widget, create a new Menu Item Override item. The newly created item will be labeled “Regular” by default.
  • Click the item and a new menu will appear to the right.
  • Click Linked to page and select separator 1.
  • For Item Type, choose Column Separator. This process connects this menu item override with the “separator 1” page. It will now act as a column separator instead of a page on the site.
  • Repeat this process for all three separator pages.
  • Once completed, you will see that the four columns are properly separated:
  • If you do not see four columns, or if the columns seems smashed together, you may need to adjust one or both of the following settings:
    • Dropdown Width: Make sure the dropdown width is sufficient for the number of columns.
    • Distribution Mode for Items in Columns: This should be set to Manual when using Column Separators.

NO-INDEX PAGES

Many menu item overrides (such as Column Separators, Headers, and Contact Details) require us to create pages. These pages will not be seen in the site navigation, however, they should be disabled from indexing so that search engines like Google do not index them. To do this, enter the page settings and enable the No-Index option.

USING FONT AWESOME ICONS

Many Item Override types allow you to display icons. We use Font Awesome’s massive icon library for icons. To use an icon, take the following steps:

  • When you encounter an icon field, such as those in the Social Icons item override type, you will see text fields for the icon class.
  • Go to the fontawesome.com icon library.
  • Select an icon.
  • On the icon page, you will find the icon class.
  • You may click on the icon class to copy it, or simply remember the class name.
  • If you copy the icon class name, be sure to grab just the portion you need. You do not need the <i class> code. You will only need the portion in quotation marks.
  • To copy this portion, paste into a text field (you can paste this right into the icon class field in the widget options if you like).
  • Be sure that only the area between the quotation marks is used:

NEXT…

Be sure to check out our series of demo walkthrough videos:

Demo Walkthrough A: Full Width Menu with Columns, Headers and Icons

Demo Walkthrough B: Features Dropdown with Image Cards

Demo Walkthrough C: Locations Dropdown with Contact Details and Social Icons