This feature enables a lateral sidebar visitors can use to navigation from one page content section to another.
To customize the side navigation, go to the Customizer -> Navigation -> Side Navigation.
Side Navigation Options
Enable side navigation
Check this checkbox to enable side navigation within the webpage you want to customize. If you leave the checkbox unchecked, the side navigation won’t be visible to users.
Show page hero bullet
This option allows for insertion of a distinct bullet on top of the items in the side navigation, representative for the page hero. If you don’t enable this option, the page hero won’t be comprised in the list of side navigation items.
Show only after scroll
Here, you have 2 options:
- To show the side navigation whenever the user is inspecting the webpage
- To show the side navigation only after users begin to scroll down the page
Check the checkbox in this subsection to display the side navigation only after people have started scrolling down the page.
Page Hero bullet label
Fill in the empty field with a label that will be attached to the bullet representative of the Hero section in the page. By default, the label is “Top”.
This is how it is reflected in the page:
Visible labels
You have 3 options:
- To make visible labels for all sections
- To make visible the label for the active section only
- To not display any label
Design Options
Navigation Design Preset
You have 3 options:
- Bullet inside label (the bullet is included into the box representative of the content section label)
- Bullet outside label (the bullet is not part of the box representative of the content section label)
- Square bullets
Normal color – this is the color of the labels in normal state
Normal text color – this is the color of the text corresponding to the labels in normal state
Active color – this is the color of the active label (the label corresponding to the content section people are visualizing)
Active text color – this is the color of the text corresponding to the active label (the label corresponding to the content section people are visualizing)
Label border color – this is the color of the borders for the labels in the side navigation
Below is an example of side navigation whose settings are as follows:
Label Typography
This setting refers to typography for the text corresponding to the side navigation labels. Click on Label Typography to open the panel with further customization options:
- Choose the font for the text of the labels
- Choose a variant for the selected font
- Select the dimensions of the text
- Define the height the line of text will have in the side navigation
- Choose a specific spacing between the letters of the text in the side navigation labels
- Use Text Transform to turn the text to Uppercase, lowercase, to capitalize it, etc.
