The7\u00a0theme has built-in \u201cThe7 Mega Menu\u201d<\/strong>\u00a0functionality which allows to display menu icons and images, create more complicated navigation layouts as well as add menu items descriptions.<\/p>\n

Megamenu is configured in three levels (fig. 1) and the options in each level are different.<\/div>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 1. Mega Menu levels.<\/p>\n<\/div>\n
In the front-end, a menu with such a structure looks the way it is displayed below (fig. 2):<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 2. Mega Menu levels in front-end<\/p>\n<\/div>\n
Mega Menu Settings<\/h2>\n
In order to enable Mega Menu for a certain menu item, it is necessary to click on the appropriate button (fig. 3) in the standard Dashboard -> Appearance -> Menus interface:<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 3. Enable Mega Menu<\/p>\n<\/div>\n
The7 mega menu button opens a popup which has general options to select an icon\/image\/FontAwesome\u00a0 HTML icon codes and configure icon position, padding in all levels.<\/p>\n
Enabling \u201cMega Menu\u201d (in Level 1 of the menu) will reveal settings described below.<\/p>\n
Level 1
<\/strong><\/h3>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 4.1. Mega menu. Menu level 1.<\/p>\n<\/div>\n
\n
add an icon\/image\/HTML to the recent menu item;<\/li>\n
enable Mega Menu itself;<\/li>\n
make the submenu fullwidth (fig. 4.2) $\"\"$ <\/a>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 4.2. Ordinary and fullwidth Mega Menu layout<\/p>\n<\/div>\n<\/li>\n
specify number of columns (there are 4 columns in the example).\u00a0Note that, on narrower screens, columns layout will be changed to fewer columns to retain usability;<\/li>\n
hide menu items on mobile devices.<\/li>\n<\/ul>\n
Level 2<\/h3>\n
$\"\"$ <\/a><\/p>\n
Fig. 4.3. Mega menu. Menu level 2.<\/p>\n<\/div>\n
Menu Level 2 has additional options to:<\/p>\n
\n
hide titles in the mega menu. If we enable this option for all menu items \u201cMENU C.1\u201d \u2026 \u201cMENU C.4\u201d in the example, it will look this way (fig. 4.4):\n
$\"Fig.$ <\/a><\/p>\n
Fig. 4.4. Level 2 menu items are hidden.<\/p>\n<\/div>\n<\/li>\n
remove link, i.e. make Level 2 menu items not clickable. It helps to make \u201ctitles\u201d for the columns;<\/li>\n
make the current menu item start a new row. If we apply this setting to the item \u201cMENU C.4\u201d\u00a0 in the example, it will look this way (fig. 4.5):\n
$\"Fig.$ <\/a><\/p>\n
Fig. 4.5. Start a new row.<\/p>\n<\/div>\n<\/li>\n
display widget area in place of a submenu column. In the example below (fig. 4.6), we have applied \u201cHide title\u201d and \u201cDisplay widget\u201d options to the item \u201cMENU C.4\u201d:\n
$Fig. 4.6. Widget area displayed in the \"MENU C.4\" item$ <\/a><\/p>\n
Fig. 4.6. Widget area displayed in the \u201cMENU C.4\u201d item.<\/p>\n<\/div>\n<\/li>\n<\/ul>\n
Level 3<\/h3>\n
Menu Level 3 has the following set of options (fig. 4.7):<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 4.7. Mega menu. Menu level 3<\/p>\n<\/div>\n
You can also enable the \u201cDescription\u201d field to add subtitles for menu items (fig. 4.8):<\/p>\n
$\"Fig.$ <\/a><\/p>\n
$\"\"$ <\/a><\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 4.8. Enable \u201cDescriptions\u201d (used for subtitles)<\/p>\n<\/div>\n
Mega Menu Appearance<\/h2>\n
Typography settings of menu items Level 2 should be configured in Theme Options\u00a0-> Top Bar & Header -> Submenu ->\u00a0Mega menu items\u00a0(fig. 5.1):<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 5.1. Level 2 Mega Menu items typography settings<\/p>\n<\/div>\n
Menu items from Level 3 have the same settings as ordinary submenu. It should be configured in\u00a0Theme Options\u00a0-> Top Bar & Header -> Submenu ->\u00a0Submenu items (fig. 5.2):<\/p>\n
$\"Fig.$ <\/a><\/p>\n
Fig. 5.2. Level 3 Mega Menu items typography settings<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Mega Menu Design The7\u00a0theme has built-in \u201cThe7 Mega Menu\u201d\u00a0functionality which allows to display menu icons and images, create more complicated navigation layouts as well as add menu items descriptions. Megamenu is configured in three levels (fig. 1) and the options in each level are different. Fig. 1. Mega Menu levels. In the front-end, a menu…<\/p>\n","protected":false},"author":2,"featured_media":2484,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-2277","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-guide","category-9","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=2277"}],"version-history":[{"count":2,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2277\/revisions"}],"predecessor-version":[{"id":2533,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2277\/revisions\/2533"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/2484"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=2277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=2277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=2277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Mega Menu Settings<\/h2>\nIn order to enable Mega Menu for a certain menu item, it is necessary to click on the appropriate button (fig. 3) in the standard Dashboard -> Appearance -> Menus interface:<\/p>\n

Level 1<\/strong><\/h3>\n<\/a><\/p>\nFig. 4.1. Mega menu. Menu level 1.<\/p>\n<\/div>\n\nadd an icon\/image\/HTML to the recent menu item;<\/li>\nenable Mega Menu itself;<\/li>\n

Level 3<\/h3>\nMenu Level 3 has the following set of options (fig. 4.7):<\/p>\n

Mega Menu Appearance<\/h2>\nTypography settings of menu items Level 2 should be configured in Theme Options\u00a0-> Top Bar & Header -> Submenu ->\u00a0Mega menu items\u00a0(fig. 5.1):<\/p>\n