Mega Menu

Chilli equips you with a kind of menu called Mega menu whose sample is placed on Shop page of our demo site. Basically, it has some typical features:

• 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.