A vertical menu has items ordered in a vertical list, instead of a horizontal list specific to traditional menus.
In the Customizer, open the list of components and find the Vertical Menu Component. Use drag-and-drop to place a vertical menu in a section of your web page.
Vertical menu added to a page:
To adjust settings for the vertical menu, click on the component that you have added to your web page, and make sure you have the corresponding settings list open in Customizer.
Content
To select what menu you want to include in this component, click on the dropdown menu under Menu (General Options).
To reorder the items of the menu, click on Edit menu structure and you’ll be taken to the Menus section in the Customizer. You can use drag-and-drop to change the order of the menu items, you can remove items from the menu or add new items to the menu.
In case you want to create a new menu and add it to the vertical menu component, use the blue button Create menu. Give the new menu a name and you’ll be taken to the menus section in the Customizer, where you’ll be able to add items to the menu.
Offscreen (mobile) menu options
The offscreen menu, also known as hamburger menu, will show a menu icon instead of a traditional menu. The offscreen menu makes it easier to view menu options on mobile devices.
To be able to visualize the changes you make to the menu as it is displayed on mobile devices, click on Open offscreen panel at the end of the settings list.
Offscreen panel width – this option defines the width onto which the panel containing the menu items is spread over.
Overlay color – when the offscreen menu is expanded, an overlay is applied onto the rest of the page (the overlay is a semi-transparent color that is applied on top of the background, to obtain a nice visual effect). Choose the color for the overlay, in case the offscreen menu is expanded.
Panel Background – this is the color of the background onto which the menu items are displayed. Use the icons next to the brush symbol, to choose either a color or a gradient for the offscreen background.
Style
From here, you will adjust the style options for the vertical menu.
You can apply distinct settings for these 3 states of the menu items:
- Menu items in normal state
- Menu items on hover (when users hover with their mouse over the menu items)
- Active menu items (items that users have clicked on, to expand the content associated to them)
Main Menu Button Options
Background color – this is the color over which the items of the vertical menu are placed. Choose a background color from the color picker.
Text color – this is the color of the text for the items of the vertical menu. Choose an adequate color for the text, from the color picker. It is recommended that you choose a contrasting color as compared to the background color, for the menu content to be visible and facilitate users’ navigation within the content.
Typography – click on the pencil icon next to Typography, to open the panel with typography options for the vertical menu items:
- Choose a certain font for the text
- Choose the weight of the font
- Define the dimensions for the text font
- Turn the text to uppercase, lowercase, capitalize it, etc.
- Choose the height of the line of text for the vertical menu items
- Select the optimal space between the letters of the menu items text (also known as kerning)
Divider color – the divider is a graphic element separating any two items in the vertical menu. Choose an appropriate color from the color picker, to clearly delimitate the items of the vertical menu.
Divider thickness – for the divider to be visible, you have to select values greater than 0 for the thickness of the graphic elements separating the items of the vertical menu.
Button horizontal padding – this is the length over which the menu items are displayed. Choose higher values and extend the length over which the vertical menu items are displayed.
Button vertical padding – this is the height over which the menu items are displayed. Choose higher values and increase the height over which the vertical menu items are displayed.
Dropdown icon spacing – this value defines the distance of the dropdown icon from the right border of the menu component. The dropdown icon is the icon attached to a main menu item that, when clicked on, expands the list of secondary-level items (submenu items) attached to that main menu item.
Dropdown icon color – the dropdown icon is the icon attached to a main menu item that, when clicked on, expands the list of secondary-level items (submenu items) attached to that main menu item. Select an appropriate color for the dropdown icon.
Submenu button options
The submenu items are the items that expand when users click on the icon corresponding to a main menu item. They are secondary-level items in the vertical menu.
Background color – this is the color of the background onto which the submenu items are placed. Choose an adequate color from the color picker.
Text color – this is the color of the text for the submenu items. Choose a color that’s visible and facilitates users’ orientation into the website content.
Dropdown icon spacing – this value affects the icon associated to a submenu item that, when clicked on, expands a new list of third-level items in the vertical menu. Choose the distance of this icon from the right border of the submenu items box.
Dropdown icon color – this value affects the icon associated to a submenu item that, when clicked on, expands a new list of third-level items in the vertical menu. Choose an appropriate color from the color picker and apply it to this icon.
Button horizontal padding – this refers to the horizontal distance over which the submenu buttons are displayed. Select higher values for wider space the submenu buttons occupy in the submenu items box.
Button vertical padding – this refers to the vertical distance over which the submenu buttons are displayed. Select higher values for higher space the submenu buttons occupy in the submenu items box.
Divider – the divider represents the graphical element that separates the submenu items from one another. For dividers to be visible in the case of secondary-level menu items, you have to set values greater than 0 for the Divider thickness.
Divider color – the divider represents the graphical element that separates the submenu items from one another. Choose an adequate color for the dividers, and elegantly separate submenu items between them.
Divider thickness – choose values that are greater than 0, for the dividers to be visible in the submenu box. The higher the values, the thicker the dividers will be.
Distance – this value decides on the distance between the menu items box and the submenu items box, when one main menu item is expanded.
Box shadow – enable this option to apply a shadow effect to the box containing the submenu items. Click on the pencil icon next to Box shadow, to open the panel with customization options for the shadow you’ve applied to the submenu items box.
Mobile Menu Options
These options refer to how the component displays on mobile devices, as an offscreen menu (hamburger menu).
Icon color – this is the color you’ll give to the icon representative for the hamburger menu. When clicked on, it will expand the list of menu items, on mobile devices.
Background – this is the color of the background onto which the offscreen menu icon is displayed. Choose an appropriate color from the color picker.
Icon size – set the dimensions of the offscreen menu icon. The higher the values, the greater the dimensions of the icon will be.
Padding – this is the surface that the hamburger menu icon occupies in the page section.
Border width – for a more stylish effect, choose a value that is greater than 0 for the border width and create a visible border for the hamburger menu icon.
Border color – in case you’ve chosen to create a visible border for the offscreen menu icon, you can also choose to adapt its color to the overall design of the section. Choose a color you want, from the color picker.
Border radius – the border radius controls the roundness of the border corners. The higher the values you select on the slider, the rounder the corners of the border will be. In the example below, a maximal value for the border radius means it will have the shape of a circle.