Skip to content

Introduction to Mega-Menus

← Designing & Building Pages

Overview

The Flex themes support a Custom Menu feature, which allows you to customize your navigation into what we call a mega-menu. A mega-menu is a menu capable of supporting the display of multiple columns of links in desktop or large tablet views.  You can take advantage of this menu system by:

  • Changing the order of pages
  • Nesting pages to create sub-menus
  • Add custom links to your navigation mega-menu
  • Select the number of columns each parent item displays.

The menu does support sub-menus. If you have a menu with more than 30 items you should use the sub-menu feature. Add additional menu tabs for each of your sub-menus. Create a "Main" menu for each item and select a "sub-menu". This will help you organize your menu easily. Note: the sub menus will still generate a widget area for each menu tab.

Planning the Menu Structure


While the mega-menu is useful, the goal of the menu is to present the site visitor with valuable links that help them accomplish the goal of their visit.  This takes some planning on your part.  You need to understand what people are searching for and consider your menu labels as to whether they speak to the visitor clearly and whether are they consistent in tone and voice.  These considerations make menus work better.  You may also push yourself to try to not have a mega-menu.  The theme is capable of displaying a single-column menu.  These focused menus usually outperform bigger menus, as they have been well crafted to address the needs of the website audience.  Whether you need a single or multi-column menu, the planning must be informed and thoughtfully crafted in order to get results.

To change the menu from multi-column (default) to a single-column menu, click Appearance > Customize > Primary Navigation Options to select the single-column menu option. 

Creating a Mega-Menu 

  1. From the WordPress Dashboard select Appearance > Menus
  2. Create your first menu and save it by clicking on the "+" sign
  3. You can create multiple "menu tabs" for each part of your menu
  4. In your "main menu" each item can have a "sub-menu"
  5. This shows the titles of the "menu tabs" you created
  6. In the column option, you can select the number of columns by determining how the columns will be broken down.  "1/2 -1/2" is 2 columns.  You can then place child elements under parent with this setting and use the "Column Assignment" feature to dictate whether the item will be in columns one to two.  The order of the items will be from top to bottom.

This process will help breakdown large complex menus and avoid the menu item maximum of 25 items.

Menu Display

  1. From the WordPress Dashboard select Appearance > Menus
  2. On the left side of the window select the menu name to display it as the top menu on the site.

Learn more about Menus in general

Feedback and Knowledge Base

(thinking…)