Mega-Menu

Since version 2.1, The7 theme supports 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 upload an menu item icon image or 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 “Header Layout” and “Submenu” boxes.

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

Level 1 (fig. 1. above)

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

“Number of columns” (in row of level 2 menu items). 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. 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 paren 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

Creating menu with icons and subtitles:

Setting up the Mega Menu: