This section describes how to add extra functionalities to a menu and how to activate the Secondary and Call To Action Menu. 

▶  

Megamenu

A MegaMenu is a menu featuring a large dropdown area where submenus are stored in convenient columns. There are examples of this in our main demo site. The Megamenu layout is only available for horizontal menus. To create this layout, go to Appearaance → Menu. You only need to create a menu with one or more sub levels: the second-level menu item will be the column title, while the third level menu items become the menu links. Click the Megamenu option in the first level menu item, screenshot .

Megamenu titles and parent menu items cannot be active links

Megamenu titles and parent menu items cannot be active links, these are textual containers for the submenu items. You cannot have active links since in mobile views they are clicked to open the submenu and the active link would be failing if combined.

Megamenu Premium Plugins suggestions

If you need extra features for your Megamenu (different from the ones you see in our demos), you can evaluate to use a dedicated extra plugin. These are our suggestions based on feedback from Uncode users:

• Groovy Menu: Highly customizable mega menu WP plugin from Grooni authors Crane theme. You’ll get a kick out of navigation as you can set any kind of a menu on website. Read More...
• QuadMenu: Quadmenu is a WordPress menu designed for both regular users and developers. The idea was bring to the world a plugin designed to be included from the scratch in your themes projects. Read More...

Secondary Menu

In Uncode you can create a top Secondary Menu. It's generally used to insert secondary service links above the main menu (login, language, etc). This menu supports submenu dropdowns, screenshot  .

To activate the Secondary Menu, please:

1. Navigate to the Theme Options → Navbar → Additional and set the Hide Call To Action Menu option to OFF, screenshot  ;
2. Insert a Top Line Text that will be part of your menu, screenshot  ;
3. Then create a new menu from WordPress → Appearance → Menu and apply your new created menu to the Secondary Menu location in the Manage Location tab. screenshot  .

Call To Action Menu

In Uncode you can create a modern Call To Action Menu. This kind of menu is generally used to insert evident links in the main menu area (usually with the appearance of buttons), but it can be used also for the creation of secondary simple menu items separated from the main menu (login, language, etc). The Call To Action Menu, as the Main Menu, supports submenu dropdowns and Megamenu, screenshot  .

To activate the Call To Action Menu:

1. Please navigate to the Theme Options → Navbar → Additional and set the Hide Call To Action Menu option to OFF, screenshot  ;
2. Create a new menu from WordPress → Appearance → Menu and apply your new created menu to the Call To Action Menu location in the Manage Location tab, screenshot  .

Justify Menu: if you use the Justify Menu layout and you have a long CTA Menu it's possible the Main Menu is not centered in the viewport. To fix this issue please insert this code in the Theme Options > CSS and adjust the 'min-width' value with the width of your CTA Menu:

@media (min-width: 960px){
body.hmenu-position-center .logo-container {
    min-width: 320px;
}
}

Button style

You can apply a button style for the first level menu item to allow one of your main menu item to stand-out from the others. This is often used for a Call To Action. To accomplish this, simply click the Button Style option inside your menu item options, screenshot  .

To change the appearance of the button menu item, you can simple paste some of these CSS classes in the CSS Classes field (if the CSS Classes is not visible please enable it from the Screen Options at the top of your menu page). Please note that you can also combine CSS Classes, screenshot  :

• btn-circle: use this setting to render the circle style button;
• btn-round: use this setting to render the round style button;
• btn-square: use this setting to render the square style button;
• btn-outline: use this setting to render the transparent button with the colored outline border;
• btn-accent: use this setting to render the button accent color;
• btn-color-xxxxxx: use this setting to render any Palette color (based on the color ID, screenshot  );
• btn-flat: use this setting to render the flat color on hover (solid color without transparency). It must be used associated with a color;
• btn-disable-hover: use this setting to remove the hover effect.