The7 theme has build-in  DT Mega Menu” functionality. Furthermore, you can add subtitles (descriptions) and icons to first 3 levels of the menu.

Mega Menu and other additional features are incorporated to standard WordPress Custom Menus editing interface (“WP-admin > Appearance > Menus”; fig. 1):

Fig. 1. Mega Menu – Level 1.

Fig. 1. Mega Menu. Level 1.

In the first level of menu by default you will “Icon”, “Enable Mega Menu” settings. You can also enable the “description” field to add subtitles for your menu items (fig. 2).

Fig. 2. Enable “Descriptions” (used for subtitles).

Fig. 2. Enable “Descriptions” (used for subtitles).

“Icon” setting allows you to add a Font Awesome icon code (please, refer to this article for details). You can choose icons size via “WP-admin > Theme Options > Header” in “Main menu” and “Drop down menu” tabs.

Enabling “Mega Menu” (in level 1 of menu) will reveal couple of additional settings in 3 first menu levels:

Level 1 (fig. 1)

“Fullwidth” option will make drop-down menu utilize 100% of site content width. This is handy when you have submenu divided in many columns.

“Number of columns” (level 2 menu items). The name speaks for itself. Each level 2 menu item will form a separate column. Note that on narrower screens columns layout will be changed to less columns to retain usability.

Level 2 (fig. 3)

Fig. 3. Menu level 2.

Fig. 3. Mega menu. Menu level 2.

Menu level 2 has additional options to:

  • “Hide titles in mega menu” This option is handy when you have menu level 3 items but do not want to show their parent item.
  • “Remove link” (useful to make “titles” from menu level 2 items).
  • Make current menu item start a new row.

Level 3
This level has only one additional option: to “start a new column”. Useful when you have lots of level 3 menu items and they does not fit “one screen height”.

Training Videos. Managing Mega Menu columns