Currently, theme has 3 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
To add such type of menu, in admin page ( Appearance Menus ) click on right top corner tab Screen Option and enable CSS Classes in sliding panel.
Now, you must add 4 level of menu
First level of menu will be Top Level and Name of Item in general menu. To this level you must add special classes, which will convert simple menu to vertical mega menu.
vertical-menu this is most important class. Add all other classes with spaces.
vmenu-opened this will make This menu as opened by default on your Homepage
rehub-main-color-bg add this class if you want to highlight of menu with main color of your site which you set in theme option – appearance
rehub-sec-color-bg add this class if you want to highlight of menu with secondary color of your site which you set in theme option – appearance
whitecolor by default, all menu items can have dark colors, but if you want to make it white color, add this class
blackcolor it’s opposite from previous. If you want to have black colors for text, add this text
border-main-color add colored borders as your main color of theme
border-sec-color add colored borders as your secondary color of theme
width-250 by default, width of item element in menu is the same as width of Menu title, but you can increase it if you add width-250 class. You can also add width-300 and width-200
You can add also additional classes for colored background of item if you want to add colors which are different from your theme option colors. Classes are:
redbg, greenbg, whitebg, lightgreybg, darkbg, darkhalfopacitybg
First Child Level of your top item will be dropdown level. Second Child level will be heading of your Column in Container. Each Column has width 250px. So, we don’t recommend to add more than 3 items in second Child level.
Third Child level will be items in Columns. You can add additional special classes to first, second and third child levels for additional formatting. Most helpful are classes:
fontbold will make element as Bold
border-grey-bottom will add grey border under element
Also, you can add special images as background of Vertical Menu Container or as image in right bottom corner. To do this, use Shortcodes in Menu Plugin (check info and link to plugin below) and add Shortcode Item in Menu as Second Child Level element and add next class to item
vmegamenu-bg if you want to place image as background
vmegamenu-bg-ext if you want to place image as bottom right outside corner
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