The Mega Menu by default is included in the Nitro theme. With this plugin, you can build the menu with different content layouts and elements included.

Here’s Mega Menu with item “Features” on Nitro demo site.

1

Enable Mega Menu

Step 1: Go to Dashboard > Appearance > Menus, then pick a menu that you want to use MegaMenu.

1

Step 2: Click “Settings” to open Settings screen for that menu.

_

Step 3: Check “Enable MegaMenu” box to start using MegaMenu

4Then you can see all settings for Mega Menu.

Note:A menu which is using Mega Menu always goes with a “green” light, so we can easily detect whether that menu has been enabled MegaMenu or not without getting into settings for each one.

Activate submenu on front-end

Normally, you’ll have to hover to show submenu on front-end. With this setting, the sub-menu will be static on your live site so you can see the changes more easily.

Step 1: Go to Dashboard -> Appearance -> Menus, then pick the menu you want to make changes to

image18

Step 2: ClickScreen Options, checkCSS Classes box
image06

Step 3: Choose the menu that you want to make static, now you’ll see another CSS Classes field. For example, here “Outfit” sub-menu will be static:image03

Step 4: Enter “active-menu” into the CSS Classes field and click Save Menu. When you see the live site, “Outfit” sub-menu will already be opened:

image01

Mega Menu settings

A MegaMenu is composed of the following elements.
5

 

First-level items

Here are the settings

 

General settings

Options

  • Width: there are 3 options “Full Container”, “Full Page”, or “Custom” (you can enter the width in pixel
  • Layout: you can choose a layout rendered from the number of second-level items, or use custom format to define the width of each column comparing to the whole menu
  • Background image & Background color: change background image and color for the menu

 

Icon

To add an icon to your menu item, go to Settings> Icon to choose the icon and its position.

For example, I want to add an icon to the item “Elements”, here are the settings:

6

Here’s what it looks like on your live site:

7

Permission

In this tab, you can choose to show MegaMenu to everyone, only logged out users, or only logged in users.

8For logged in users you can choose which types of member that can see the Mega Menu’s content:

9

Second-level items

Here are the settings for second-level items:

 

General

To add an element, click on settings for second level items-> Add Element. The element will appear below the item name on your live site.

You can add 4 types of element allowing you to build various variations of menus for the shop:

  • Text: add text or custom HTML for shortcodes, images, etc

10

  • Sidebar (Widget): add a widget

Note:To add content for widgets, go to Dashboard > Appearance >Widgets.There are many premade widgets which can be used for sidebar(WooCommerce Sidebar, Primary Sidebar, Footer Area #1, etc.). You can also add your own sidebar.

 

  • Products: add one or multiple products
    11
  • Product Categories: add one or multiple product categories

12

 

Third-level items

Here are the settings for third-level or lower items: