The Vertical Navigation Module can be styled locally or globally. The advantage of global styling is that it automatically styles all the Vertical Navigation Modules on your website at the same time, creating a consistent theme and saving your time. It is possible to find the Vertical Navigation Global Styling under the Module Design section of the Global Styling tab of the editor.
It is possible to style text, background, border and spacing for both the top and the sub level menu.
Firstly it is possible to style the text in terms of font color, size, family, weight, text decoration, italic and uppercase options, as well as alignments. Keep in mind that it is also possible to differentiate some of these options depending on the state - hover, normal or active state.
In this section you can define a background color and set its transparency. Much like the text, it is also possible to differentiate the background color depending on the state - hover, normal or active state.
In this section you can define the border color, width, style and radius. It is also possible to differentiate some of these options depending on the state - hover, normal or active state.
When styling the spacing you can define the margin - which adjusts the space outside of an element; and padding - which adjusts the space inside of an element.
2. CONTAINER SETTINGS
In this section you can define a specific color, border and spacing for the overall container (module) where the Vertical Navigation is included.
3. Icon Style
Finally, if you have enabled the Page Icon, in this section it is possible to define its size, color and spacing.
4. Apply Global Styling
As soon as you save your Global Styling, all the Vertical Navigation Modules will inherit that design. However, if later you choose to style a vertical navigation locally, it will overwrite the global styling but only for that specific module. Click here to read more about the Vertical Navigation Module local styling!