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.
Enable Mega Menu
Step 1: Go to Dashboard > Appearance > Menus, then pick a menu that you want to use MegaMenu.
Step 2: Click “Settings” to open Settings screen for that menu.
Step 3: Check “Enable MegaMenu” box to start using MegaMenu
Then 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
Step 2: ClickScreen Options, checkCSS Classes box
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:
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:
Mega Menu settings
A MegaMenu is composed of the following elements.
- First-level items: the menu labels on your live site
- Second-level items: the menu columns
- Third, fourth, fifth-level items: the column content
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:
Here’s what it looks like on your live site:
Permission
In this tab, you can choose to show MegaMenu to everyone, only logged out users, or only logged in users.
For logged in users you can choose which types of member that can see the Mega Menu’s content:
Second-level items
Here are the settings for second-level items:
- General: add element to your second-level item
- Icon: similar to first-level
- Permission: similar to first-level
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
- 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
- Product Categories: add one or multiple product categories
Third-level items
Here are the settings for third-level or lower items:
- Icon: similar to first-level
- Permission: similar to first-level