1. Home
  2. ReHub Theme
  3. Basic settings
  4. Mega Menus

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

If you want to make some element as Heading, add fontbold and cursordefault

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

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

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

How to make first level of mobile menu as clickable

Tip: By default, each item in mobile version of menu which has sub-elements, become clickable and opens subitems. If you want to prevent this, add class to menu ‘rh-mobile-linkable’. This will keep original link in menu item.