Mega Menu

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 give any 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

Tab contents:

– Settings tab: Some general settings for this megamenu

– 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 Urus – Custom menu to add more column to the SHOP Mega menu
  • Step 5: Save your work then your Mega menu 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, kindly refer to this article for better understanding how to build a page using WPBakery Page Builder.

Was this page helpful?