update your theme and Salient plugins<\/a>.<\/p>\nHead to Appearance \u2192 Menus in your WordPress admin panel. To start creating a mega menu, create a basic submenu structure by nesting a few menu items. In our example, we’ve moved three menu items to be children of the “Shop” item.[\/vc_column_text][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” bottom_padding=”30″ text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][image_with_animation image_url=”10388″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default”][\/vc_column_inner][\/vc_row_inner][vc_column_text]After setting that up, a standard dropdown will display for the child menu items when hovering over the top level item as demonstrated below.[\/vc_column_text][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][image_with_animation image_url=”10389″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default”][\/vc_column_inner][\/vc_row_inner][\/tab][tab icon_family=”none” title=”Salient Menu Options” id=”1662473662486-2″ tab_id=”1662473662486-7″][vc_column_text]\n
Accessing the Menu Options<\/h2>\n
Opening any menu item will reveal an option labeled “Salient menu item options” at the top. By clicking that button, a modal will become visible with options specific to the open menu item.[\/vc_column_text][image_with_animation image_url=”10393″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default” margin_bottom=”30″][vc_column_text]\n
How Menu Options Work<\/h4>\n
Options are grouped into tabs based on their category on the top. You can switch between each group by clicking on the relevant tab.<\/p>\n
The menu items that are available will change based on how deep a menu item is nested. For example, top level menu items are the only items which can enable a mega menu, and secondary items have specific options relating to defining their column width within a mega menu.[\/vc_column_text][\/tab][tab icon_family=”none” title=”Creating A Mega Menu” id=”1662473662503-4″ tab_id=”1662473662503-7″][vc_column_text]\n
Basic Mega Menu<\/h2>\n
To create a basic mega menu setup, we’ll add some additional child items and then enable the mega menu option on the top level item, “Shop”.<\/p>\n
In a mega menu, each direct child menu item (denoted in blue below) will become a column. Further menu items can then be nested in each column (denoted in yellow below).[\/vc_column_text][image_with_animation image_url=”10412″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default” margin_bottom=”30″][vc_column_text]\n
Front-end display<\/h4>\n[\/vc_column_text][image_with_animation image_url=”10415″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default”][vc_column_text]Hurray! We’ve created a basic mega menu, albeit a boring one. Before we start spicing things up by utilizing more interesting options. Let’s cover some quick common variants.[\/vc_column_text][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all” el_id=”multiple-headings”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text css=”.vc_custom_1662473707504{margin-top: 60px !important;}”]\nVariant: Multiple Headings Within One Column<\/h3>\n[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_column_text]Since direct children within a mega menu show their label as a column title, we can hide that by making use of the “Disable Mega Menu Item Title” option. With that option on, the direct child item will act only as a column, and not display any text. Further items can then be nested within the column (denoted in green below) and display their labels above each set of children.[\/vc_column_text][image_with_animation image_url=”10432″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default”][vc_column_text]\nFront-end display<\/h4>\n[\/vc_column_text][image_with_animation image_url=”10427″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default”][vc_column_text css=”.vc_custom_1611631014710{margin-top: 60px !important;}”]\nVariant: No Column Heading Titles<\/h3>\n[\/vc_column_text][vc_column_text]Making use of the same “Disable Mega Menu Item Title” option as the above variant, we can simply remove the heading label from all columns. In this instance, we don’t need to nest an additional level since we don’t need any group headings.[\/vc_column_text][image_with_animation image_url=”10424″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default”][vc_column_text]\nFront-end display<\/h4>\n[\/vc_column_text][image_with_animation image_url=”10422″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default”][\/tab][tab icon_family=”none” title=”Creative Example” id=”1662473662580-1″ tab_id=”1662473662580-1″][vc_column_text]\nCreative Example<\/h2>\n
Now that we’ve explored how to make a basic mega menu, here’s an example that takes the design up a notch by utilizing more menu options.[\/vc_column_text][image_with_animation image_url=”10436″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default” margin_bottom=”30″][vc_column_text css=”.vc_custom_1612059649807{padding-top: 40px !important;}”]\n
A breakdown of the menu options<\/h3>\n[\/vc_column_text][vc_column_text]\nShirts Menu Item<\/h4>\n
Going through each mega menu section from left to right, we’ll take a look at the “Shirts” item settings first.[\/vc_column_text][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/4″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][image_with_animation image_url=”10453″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default” margin_bottom=”30″][\/vc_column_inner][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”3\/4″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][image_with_animation image_url=”10520″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default” margin_bottom=”30″][image_with_animation image_url=”10444″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default” margin_bottom=”30″][\/vc_column_inner][\/vc_row_inner][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” top_padding=”40″ text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all” el_id=”icon-menu-items”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]\n
Blank Column Items<\/h4>\n
The next two child menu items have all the default settings, except for the menu item title disabled. This renders them as empty column holders for the nested menu items.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][image_with_animation image_url=”10454″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default” margin_bottom=”30″][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” top_padding=”40″ text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all” el_id=”icon-menu-items”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]\n
Icon Menu Items<\/h4>\n
All the remaining menu items within this mega menu example make use of the same settings, with different icons assigned.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/4″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][image_with_animation image_url=”10457″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default” margin_bottom=”30″][\/vc_column_inner][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”3\/4″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][image_with_animation image_url=”10458″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default” margin_bottom=”30″][\/vc_column_inner][\/vc_row_inner][vc_row_inner column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” text_align=”left” row_position=”default” row_position_tablet=”inherit” row_position_phone=”inherit” overflow=”visible” pointer_events=”all” el_id=”description”][vc_column_inner column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default” background_color_opacity=”1″ background_hover_color_opacity=”1″ column_backdrop_filter=”none” column_shadow=”none” column_border_radius=”none” column_link_target=”_self” overflow=”visible” gradient_direction=”left_to_right” overlay_strength=”0.3″ width=”1\/1″ tablet_width_inherit=”default” animation_type=”default” bg_image_animation=”none” border_type=”simple” column_border_width=”none” column_border_style=”solid”][vc_column_text]Each of the menu items with icons also make use of the WordPress “Description” field to display a subtitle. If you do not see the description field in your menu items, ensure the following<\/p>\n
\n- The description field is enabled in your WordPress screen options as shown in the below screenshot.<\/li>\n
- The theme option is enabled to display descriptions within submenus. The relevant theme option is titled “Header Dropdown Display Descriptions”<\/strong>\u00a0 and can be found in the Salient options panel \u2192 Header Navigation \u2192 Dropdown\/Megamenu tab.<\/li>\n<\/ol>\n[\/vc_column_text][image_with_animation image_url=”10441″ image_size=”full” animation_type=”entrance” animation=”None” animation_movement_type=”transform_y” hover_animation=”none” alignment=”” img_link_large=”yes” border_radius=”5px” box_shadow=”small_depth” image_loading=”default” max_width=”100%” max_width_mobile=”default” margin_bottom=”30″][\/vc_column_inner][\/vc_row_inner][\/tab][tab icon_family=”none” title=”Video Tutorial” id=”1662473662705-10″ tab_id=”1662473662705-10″][vc_column_text]\n
Video Tutorial<\/h2>\n
In this tutorial we take a look at recreating the mega menu featured on the main theme demo.[\/vc_column_text][nectar_video_lightbox link_style=”play_button_mouse_follow” image_url=”10617″ mouse_indicator_style=”solid_color” video_url=”https:\/\/www.youtube.com\/watch?v=6m7XloEHqWQ” image_size=”large”][\/tab][\/tabbed_section][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"
[vc_row type=”full_width_background” full_screen_row_position=”middle” column_margin=”default” column_direction=”default” column_direction_tablet=”default” column_direction_phone=”default” scene_position=”center” top_padding=”100″ constrain_group_1=”yes” bottom_padding=”100″ text_color=”dark” text_align=”left” row_border_radius=”none” row_border_radius_applies=”bg” overflow=”visible” overlay_strength=”0.3″ gradient_direction=”left_to_right” shape_divider_position=”bottom” bg_image_animation=”none” shape_type=””][vc_column column_padding=”no-extra-padding” column_padding_tablet=”inherit” column_padding_phone=”inherit” column_padding_position=”all” column_element_direction_desktop=”default” column_element_spacing=”default” desktop_text_alignment=”default” tablet_text_alignment=”default” phone_text_alignment=”default”…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/10387"}],"collection":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/comments?post=10387"}],"version-history":[{"count":8,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/10387\/revisions"}],"predecessor-version":[{"id":10738,"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/pages\/10387\/revisions\/10738"}],"wp:attachment":[{"href":"https:\/\/themenectar.com\/docs\/salient\/wp-json\/wp\/v2\/media?parent=10387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}