The mega menus are available only for top level navigations items only in “Main Menu” area. Follow the steps below to create a mega menu: Step 1 – Make sure that Mega Menu Elements, CSS Classes and Description option is checked in the Screen Options under “Show advanced menu properties” while you are in Appearance > Menus page in your WordPress Dasboard.
Step 2 – Now, add a an item to the menu editor. This has to be a top level item!
Step 3 – Click on arrow icon in the top right-hand and expand. Tick Activate Mega Menu Dropdown for this item checkbox.
Step 4 – Click Add Column
Step 5 – Drag it right below mega menu item and then indent it
Step 6 – Specify column width by specifying a css class, in example
col-sm-4to display 4/12 ( or 1/3 ) width.
Step 7 – Now, you need to add child menu items, which should be indented under Mega Menu Column as shown on the image below
- Step 8 – To add Heading/ Title, click Add Heading Item in Mega Menu Elements and arrange it in the first order.
Step 9 – Your dropdown should now look something like this :
There are several additional classes available for the mega menu. Simply add them next to the ‘megamenu’ class separated by one single space.
- col-sm-3 – 1/4 column width
- col-sm-4 – 1/3 column width
- col-sm-6 – 1/2 column width
- col-sm-8 – 2/3 column width