Currently, theme has 3 variants of mega menu.
Table of Contents
Columned 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
Vertical Mega menu
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 several levels 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. You must add it as first class and it’s required. All other classes are optional, you can add them with spaces.vmenu-opened
this will make This menu as opened by default on your Homepagerehub-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 – appearancerehub-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 – appearancewhitecolor
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 textborder-main-color
add colored borders as your main color of themeborder-sec-color
add colored borders as your secondary color of themewidth-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
Now, add some Subitems to this Main item. They will be visible as dropdown menu. And subitems will be our 2 level. Now, add 3 and 4 level which will be our sliding panel
Our sliding panel can be made via 2 different ways. As simple menu items like on screenshot above or as Custom Area via Page builder
Simple menu items for Sliding panel
If you want to add them as simple menu items, just add 3 and 4 level of menu.
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 Boldborder-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, add Image Html code as 3 level and add next class to itemvmegamenu-bg
if you want to place image as backgroundvmegamenu-bg-ext
if you want to place image as bottom right outside corner.
Anyway, if you want to have more advanced layout, it’s better to use Page builder for Sliding Panel
Custom Container for Sliding panel via Page builder
You can use page builder to make sliding panel instead menu items. For this, create template with Elementor or other page builders, copy shortcode of template and insert it as menu item.
To add shortcode as menu item, use Custom link item and place SHORTCODE as link. Then, in top right corner (Screen option button), enable Description for menu items and place shortcode to description field
Also, you must use class inner-700 or inner-500 for parent item of your shortcode item of menu. Please, check our video in end of article for more details
Advanced Mega menu
Advanced Mega menu gives you unlimited possibilities for menu. You can use page builder to build mega menu. For this, use next steps:
- Create page via page builder and copy it’s shortcode.
- Add class
rh-megamenuto top menu level item which will be container for your mega submenu.
- Add class noshadowdrop if you want to remove shadow in dropdown panel
- Add shortcode of page which you made in page builder and insert it as child item of top menu level. Check previous part to see how to add shortcode as menu item.
How to use Gutenberg to make Mega menu
You can use Greenshift recommended plugin to build menu.
For this, create reusable template
Add Row block and add menu items. Or simply Import the ready menu template from the Template library (blue icon in top bar)
Then, save Reusable template and return back to list with all templates. Copy shortcode of template
Now, create menu item with Custom Link in Appearance – Menu and add class
rh-megamenu to menu item.
Now, create child menu item for this menu. Use word SHORTCODE as link and place shortcode which you copied in previous step in Description field. If you don’t see description field, then, enable it in Screen options in top right corner of Menu editing page.
How to use Ajax loading for mega menu
If you have complex menu with images, maybe it’s better to load it asynchronously while user hover or click on item. For this purpose, when you copy shortcode of Reusable template, copy shortcode for Ajax render. Also, copy special hover or click trigger class. Now, when you create mega menu item, add also hover trigger classes to parent item and use shortcode with ajax in description
How to use Elementor for ajax mega menu
Adding elements from Elementor as Mega Menus can save you a lot of time and you can make very attractive Menu Elements, but it has one big disadvantage – it generates a lot of code menu and it’s not good for SEO and not good for speed of site. This is why we added special option to load Elelementor templates with Ajax.
So, Once you created template, go to Templates – All templates, find your template and edit it
You can find next
Now, you can use shortcode with Ajax loading. Copy also rh-el-onhover load-block-1515 classes. Now, when you create your Menu items, add these classes to Parent menu (which will work as Hover trigger). Make sure that your Template doesn’t have any dynamic scripts (like carousels, because they will not work).
If you need to use templates with scripts, you can use Shortcode with Caching, it will work fast, but will generate code on page, so, it’s better to avoid dynamic elements in Mega menu items
Adding labels or icons (hot, new) to menus.
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 in menu, follow next tutorial