Mega Menu (Mobile)

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 (view on mobile to see proper mobile version)

Notes:

This document covers the mobile version of the Mega Menu widget, intended for mobile use only. For desktop, you should use the standard Mega Menu widget.

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

A few notes before we begin…

Desktop vs. mobile: This mobile version of the Mega Menu widget is completely separate from the desktop version. This version must be set up separately from the desktop version. As much as we would love to offer the ability to set up both desktop and mobile at once, in one widget, it’s just not possible. The construction of each widget is different, and requires separate setups.

Restricted stying: You may notice that the styling options are less robust than normal. This is due to the specific way that menus are utilized in the builder for mobile layouts, and the inability to access CSS in these circumstances.

Consider whether you truly need a “mega” mobile menu: If you’ve seen what is possible with the Mega Menu widget, or you’ve built a great mega menu for your desktop site, you might be pretty excited to create a mobile version. But keep in mind that much of what makes the Mega Menu unique is the column control, as well as features such as image cards. These features will be much different on mobile, as screen space is limited. And as mentioned in the first note above, keep in mind that you will need to build out the menu separately on mobile. If this works for you – great! But keep in mind that if you have limited time, it is perfectly acceptable to use the Mega Menu for desktop visitors and the standard menu for mobile visitors.

Previewing in desktop: While working in the editor, you will need to use the Preview button in the top menu in order to see the menu render properly.

WIDGET PLACEMENT

This widget must be placed in the footer. This is the only way that the menu will render properly on mobile. Placement in the footer will allow the menu to appear throughout the site, on any page.

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.

  • Link Target: Choose to open links in the same tab or a new tab. Same tab is standard behavior for navigation menus.
  • Mobile Menu Position/Animation: This setting provides plenty of options for how the menu will appear. Options include entry from left/right/top/bottom, as well as full screen options.
  • Mobile Menu Close Text: This is the text that allows the user to close the menu.
  • Mobile Menu Overlay: This places an overlay over the site (the portion visible behind the menu). You may choose from Dark or Light.
  • Parent Indicator Open Icon / Parent Indicator Close Icon: These icons display when a dropdown is open or closed.

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. As mentioned in the section above, Menu Item Overrides indeed override global settings.

For every menu item override, there must be a page created first – even for things that you can’t see, like 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 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 social icons). 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 Social Icons within the mobile Mega Menu.

  • We’ll begin by creating a new page in the Pages menu. Click Pages in the sidebar menu of the builder and click the Add Page button.
  • Name the page “Social icons” (or similar).
  • Position the page in the Pages menu where you would like the icons to appear within the mega 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 social icons.
  • For Item Type, choose Social Icons. This process connects this menu item override with the Social Icons page.
  • Enter the details of your social icons. This may include titles, icons and links. For more information on using Font Awesome icons, see the Using Font Awesome Icons section below.
  • Once completed, you will see that the social icons on display in your mobile menu:

NO-INDEX PAGES

Many menu item overrides (such as Column Separators, Headers, and Contact Details) require us to create pages. These pages will of course 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, follow these 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).
  • 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