• The first one, a visible feature is that Mega menu allows you to organize sub-menus according to columns. Meanwhile, sub-menus are usually arranged in conformity with hierarchy.
• The structure of a mega menu contains Mega menu heading, sub-pages and widget area.
• Mega menu helps icons to be shown next to pages and sub-pages on the Navigation bar

In order that you can better perceive how to build a Mega menu, we will opt Shop page in which Mega menu is created.Please follow these steps:

Step 1: Navigate to Appearance > Menus > do the same steps mentioned in Set up menu above to obtain structure of the mega menu on Shop page as in the image

Step 2: Click the triangle icon on the right of Shop pages item then it will expand into many options like:Navigation label: name of the parent page (Shop page)

Icon: you can select an icon of the page and change size, color and position of the icon here. Click the arrow icon to opt an icon and click the stick icon to make alternations to the icon.

Enable Mega menu: ticking this box allows display of megamenu

Mega menu column: This option has a drop-down list of different numbers of columns shown in Mega menu area. The number varies from 2 to 6. On our demo site, this number is 4.

Hide Mega menu heading: Check this box if you want to hide Mega menu heading. In our demo, Shop pages item is considered to be a Mega Menu heading. When you choose option of hiding mega menu heading, Shop pages title will automatically disappear on Mega menu area.

Step 3: Regarding Shop pages item, it is a Custom link. Therefore, you also have common options like URL, Navigation, Title Atribute and Icon. Besides, you will have an extra option named Mega Menu Widget Area which contains a drop-down list. As you see, Shop pages item will be a Mega menu heading when it is displayed on the site. Thus, you will have to opt Select Widget area whereas the remaining options in this drop-down list will make Shop pages item become a widget area.

Step 4: As for sub-pages like Cart, My account and Checkout, you only need to modify three options which are Navigation Label, Title Attribute and Icon.

Step 5: Shop label 1, 2 and 3 constitute the widget area of Mega menu. Therefore, before making any changes to options included in these three items, please assure that you created sidebars and widgets corresponding to them:

• We have three sidebars: Menu Sidebar1, Menu Sidebar 2 and Menu Sidebar 3.

Learn more about creating sidebars:

http://nootheme.com/documents/chilli-sidebars-widgets/

• Next, navigate to Appearance > widgets > drag WooCommerce Products widget to Menu Sidebar 1, Menu Sidebar 2 and Menu Sidebar 3. Click the triangle icon then you will have further options like Title, number of products to show, Show (All products, Featured products, On-sale products), Order by(Date, Price, Random and Sales), Order (Descending or Ascending).

Learn more about adding widgets to a sidebar:
http://nootheme.com/documents/chilli-sidebars-widgets/

Similar to Shop pages item, Shop label 1, Shop label 2 and Shop label 3 are Custom links; therefore, you will also have options like URL, Navigation label, Title Attribute, Icon and Mega Menu Widget Area. In the drop-down list of Mega Menu Widget Area, opt Menu Sidebar 1, Menu Sidebar 2 and Menu Sidebar 3 to Shop label 1, Shop label 2 and Shop label 3 respectively.

In order that pages can be displayed in the menu that is located in header area of the site, you have to carry out these steps:

Step 1: Navigate to Appearance–> Menu section of your admin sidebar.
Step 2: Click the Create A New Menu link to make a new menu. Enter the name then click the Create Menu
Step 3: To add menu item, select one of your created pages on the left hand side and click the Add To Menu button. You can also add different posts from the left side.
Step 4: To add a custom menu item, enter a custom name and link into the Links box.
Step 5: Manage your menus by using the drag and drop functionality. To create a dropdown menu in Menu Structure, simply drag a menu item on the left side to the area on the right side.
Step 6: After setting up your menu, scroll down to the bottom of the page to assign the menu on the Theme Location box.
Step 7: Once It’s all done, make sure you click  Save Menu.

Now returning to the site, you will see the menu shown on the header like this:

Yet when you see the header on our demo site:

You can wonder yourself “why is the header of my site different from that of your site?”.To achieve such design, refer to this link:

http://nootheme.com/documents/header-2/