Mega Menus

While we’re working on automating the process, for now creating mega menus is still fairly easy.

Step1 : Create a menu and sub menu links in the order of the example shown below.

Above example makes preparation for each 2nd level parent menu as a mega menu column

Step 2: Expand the Screen Options on the top of the Menus page and enable the CSS Classes

Step 3: Assign the parent menu the mega-parent class:

Each Menu Item ordering should be like the following:

  • Parent Menu Item (with mega-parent class)
    • Mega Menu Column First Item
      • Mega Menu Column Second Item (must be a child of first)
      • Mega Menu Column Third Item (must be a child of first)
      • Mega Menu Column Fourth Item (must be a child of first)
    • Mega Menu Column First Item
      • Mega Menu Column Second Item (must be a child of first)
      • Mega Menu Column Third Item (must be a child of first)
      • Mega Menu Column Fourth Item (must be a child of first)

Result: Should be looking similar to the following (as seen live on the Bavarian Demo Website):

Was this helpful to you?
Yes No