H&D – Mega Menu Setup

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. Screen Options

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.

Activate Mega Menu

Step 4 – Click Add Column

Add Column

Step 5 – Drag it right below mega menu item and then indent it

Indent Column

Step 6 – Specify column width by specifying a css class, in example col-sm-4to display 4/12 ( or 1/3 ) width.

Column 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

Child Menu Items

  • Step 8 – To add Heading/ Title, click Add Heading Item in Mega Menu Elements and arrange it in the first order.

Heading Item

Step 9 – Your dropdown should now look something like this : Dropdown Mega Menu

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

Leave A Comment?

You must be logged in to post a comment.