- 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 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 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:
- 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:
Step 6: Click Save Menu button