The Navigation Menu should be included in the Header of a page and it is obtained by dragging the Navigation Module from the Basic Modules top bar. This tool is what will allow the visitors of the website to navigate from page to page.
1. How to open the Menu Settings?
It is possible to open the Menu Settings in two ways - by selecting the Module and clicking on Edit / Settings icon or by choosing Menu from the dropdown options of the Navigation Settings on the left side menu of the Global Styling tab of the editor.
2.1. Placement & Float
You can choose where to place the menu within the column and row you have selected. It is possible to place it on the right, centre or left.
2.2. Menu Icon
In terms of visual representation, the menu can either be a horizontal list of the pages or it can be replaced by one single icon. To choose the latter option, enable the Menu Icon setting. Since the editor allows you to design truly responsive websites, you can choose to have both types of menu depending on the viewport.
2.3. Slide Direction
In case the Menu Icon option is enabled, it is possible to decide whether the pages should slide from the right or left once someone clicks on the menu icon.´
2.4. Push Content
With this option disabled, when the menu slides, it covers the right or left side of the page.
When this option is enabled, when the menu slides, it pushes the existing page to the right or left.
2.5. Show Parent Links as Active
When this option is enabled, when a visitor is in a subpage, the top-level page will also be shown as active. For example, imagine the following page hierarchy: Services > Service 1 > Prices. When the visitor is checking the Service 1 or the Prices page, the Services page will be shown as active on the main menu.
3.1. Menu Icon
The first styling option is regarding the menu icon, displayed by default in the mobile viewport. In this section it is possible to style the icon color and size.
3.2. Top Level Menu: Text, Background, Border & Spacing
In the following sections it is possible to style the top level menu in terms of text - font color, size, family, weight, text decoration, alignment, uppercase and transition options; background color; border - color, style, width and radius; and spacing - mardin and padding.
3.3. SubLevel Menu: Text, Background, Border & Spacing
In the following sections it is possible to style the sub level menu in terms of text - font color, size, family, weight, text decoration, alignment and transition options; background color; border - color, style, width and radius; and spacing - mardin and padding.
3.4. Side Menu
Furthermore, there are specific styling characteristics for the side menu, which includes the menu frame background color, the close icon color and spacing in terms of padding.
3.5. Container Settings
In the container settings it is possible to define the overall spacing both in terms of margin and padding.
3.6. Icon Style
In case you have added icons to your pages you can style them in this section. It is possible to define the icon size, color and spacing, both in terms of margin and padding. Read more about Page Icons here!