Firstly, you should determine the mega menu items that will be display in the main menu. In this document, we will use item SHOP as example on Primary Menu. Each mega menu will contains list of sub menu within it
1. Create Sub-Menus for Mega menu
So first thing to do is create sub-menus for the Mega menu SHOP by follow these the below steps:
- Step 1: Navigate to Appearance > Menus > On Edit Menus tab, then create a new sub-menu
- Step 2: Create a new menu and enter easy to remember name to this new menu item. In this example, we will create the sub-menu item Shop Layouts (The first column item on the Mega Menu)
- Step 3: Click Create Menu to save your newly created item
- Step 4: Add more link items to this menu by add more custom links to your menu
- Step 5: once your’e finished to add items, simply click Save menu to save your work.
2. Add sub-menu to Mega Menu item
Now navigate back to your Primary menu by select Primary Menu.
- Step 1: Choose item Shop from your main menu (If you don’t have this item yet then just create a new custom link as of step 4 above)
- Step 2: Click on Settings icon beside the menu’s label.
There will be some settings for this SHOP item appeared like below
– Settings tab: Some general settings for this megamenu. Remember to set Enable Mega option to On
– Icon tab: You can set an icon for this menu item if needed
– Content tab: Every single content for this Mega menu can be build here by using Visual Composer (WPBakery Page Builder)
- Step 3: Select tab Content then wait for the Bakery Page Builder finished to load
- Step 4: Now you can use Shortcode from Theme Elements > Custom menu to add more Menu Items to your columns into the SHOP Mega menu
- Step 5: Save your work then your Mega menu is already set. Do the same with another sub-menu columns as long as you needed.
To be able to build more complicate mega menu structure, you might want to learn how to build a page using WPBakery Page Builder.