The following article makes use of menu options added in version 13 of Salient. If you’re not seeing them available, make sure to update your theme and Salient plugins.
Head to Appearance → 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.
After setting that up, a standard dropdown will display for the child menu items when hovering over the top level item as demonstrated below.
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.
Options are grouped into tabs based on their category on the top. You can switch between each group by clicking on the relevant tab.
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.
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”.
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).
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.
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.
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.
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.
Going through each mega menu section from left to right, we’ll take a look at the “Shirts” item settings first.
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
In this tutorial we take a look at recreating the mega menu featured on the main theme demo.
