Vital theme has three menu locations:
- Main navigation – main website navigation (shown on the left).
- Secondary navigation – secondary navigation (shown on the right).
- Mobile navigation – navigation that is shown for devices starting with tablet portrait.
Search and cart icons are not part of the menu. They can be enabled in Theme Options/Header Options.
To assign menu, go to Appearance/Menus, switch to Manage Locations tab and assign menus to the locations.
Vital has three base menu styles that are selected in Theme Options/Header Options. These are standard, side and full-screen overlay menus.
- Standard – menu items only in header bar. Uses main menu and secondary menu items.
- Side – triggered by hamburger menu button in header bar. Uses main navigation items and can be used together with secondary navigation in header bar.
- Full-screen overlay – triggered by hamburger menu button in header bar. Uses main navigation items and can be used together with secondary navigation in header bar.
For default submenu style, just drag & drop to create submenu levels.
To use this menu style, you need to activate CSS Class. Click screen options on top right in Appearance/Menus and activate CSS Classes field.
Mega menu is displayed with with standard menu style only.
To activate mega menu, add class megamenu to the first level menu item. Second level menu item will serve as column title and third level items as column content.
You can have from 2 to 6 columns. If you have 4 second level menu items, it means your mega menu will have 4 columns. Use classes like columns-3 to specify your column width.
*Use hide-title class for second level item to hide column title.
If you want to add icon to your menu item, you can use simple html and add it to your menu item name. Example for adding Font Awesome icon:
- Go to Font Awesome icon list page.
- Choose your icon and click on it.
- You will be headed to the icon page, where the html code for the icon is available to copy.
- Copy icon html and add it to the name of your menu item.
<i class="fa fa-comments-o" aria-hidden="true"></i> Help Center
We have prepared some classes for use in standard and side menu styles. Just add it to the CSS Class field of the menu item.
(To activate CSS class field click screen options on top right in Appearance/Menus.)
Available classes are:
menu-button menu-button-dark menu-button-outline menu-button-outline-dark
As a result menu item becomes a styled button. In example below items have menu-button-outline class applied:
One Page Menu
One page menu scrolls to the section with the specified id. To set it up follow steps below:
- Go to Appearance/Menus and add Custom Links item.
- Set unique ID link as menu item URL. For example, #about-us
- In css classes field of the menu item add: one-page-link
- Edit row in your page and in Row ID field add about-us
- Now when you click on menu item it will scroll to the row with same section id as menu link.