Mega Menus

Currently, theme has 3 variants of mega menu.

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-menus to menu. If you want to slide menu in left side of top level item – add also class rh-left-slide-menu

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 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

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 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, add Image Html code as 3 level 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.

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-megamenu to 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.

<span class="rh-menu-label">HOT</span>

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

How to make first level of mobile menu as clickable