From 6.6 version theme also has inner Mega menu options. Early, only Uber Menu plugin was supported for this. There are two variants of Mega menu.
This is simple menu which is divided on sections with subheadings. Each sub-heading can be also a link. To set such menu, do next steps:
- In admin page ( Appearance Menus ) click on right top corner tab Screen Option and enable CSS Classes in sliding panel.
- Add Submenus to menu item. Second level of submenu will be SubHeading. Third level will be item.
- In top level item – add class
rh-subitem-menusto menu. If you want to slide menu in left side of top level item – add also class
Advanced Mega menu gives you unlimited possibilities for menu. You can use any number of columns, custom text, images and even dynamic tabs. Use next steps:
- Go to plugins page and find plugin with name “Shortcodes in Menus”, then install and activate it. Here is page of plugin on wordpress
- After activating a plugin, go to Appearance Menus and click on right top corner tab “Screen Option” and enable CSS Classes in sliding panel + also Shortcode and Description.
- Add class
rh-megamenuto top menu level item which will be container for your mega submenu.
- Drag and drop Shortcode Item from left panel to right and attach it to top level item with
rh-megamenuclass. In Title of item you can add any words, but for content you can use any html and shortcodes.
Now, it’s time to decide what to place as content for mega menu. Usually, I do next: create new page, make it as ‘Full width’ and begin to combine different content, shortcodes and images. In preview, I can see how this will look. Then, I switch to text view mode in Content Editor and copy all content to my menu. You can even use visual composer to build this menu. For best results, I recommend to use next shortcodes from shortcode generator (Button S near Add media button): Columns, Lists, Dividers. For subheading use h4 tags. Here some examples of such menus, you can copy this code to your menu, just change your links and names to your own. Mega menu 3 columns with links + 1 column with text and image, Mega menu with post widget.
You can also add some labels to top menu level. For this, add next code to Navigation label of menus.
This is for Hot Red label. Label for green color is:
<span class="rh-menu-label rh-menu-label-green">NEW</span>
And for blue:
<span class="rh-menu-label rh-menu-label-blue">TOP</span>
To add icons to menu items, just copy code of icon from site to element (for example directly in Navigation Label field)
Please, check our videos for menu:
How to add simple columned menu
Advanced columned Menu
Adding Icons to subheaders in Mega Menu
Adding Enhanced Mega Menu with visual composer
Adding Mega Menu with vertical sections
Adding Labels to Menu items
Adding icons and right float to Menu
How Mega menu works on mobiles