Auto Inpage Navigation
The automatic inpage navigation element allows you to display a table of content anywhere on any page of your website. The element automatically generates the links for the respective page areas that are structured by chapter. In this tutorial we will explain how to proceed and which individual design options you have.
Sample view Step by step guide Screen adaption
Sample view
Widescreen
Desktop
Tablet
Mobile
Manual
Create an element
- After clicking +Content, select Auto Inpage Navigation located in the Navigation Elements tab.
Adjusting settings
- With Scroll Type you can choose between either a fixed or a scrolling navigation.
- With the Element Width you can choose the orientation of the inpage navigation to either the content width or to the page width.
- In Alignment you can choose between either a left-aligned or a centered inpage navigation.
- With Element Design you can determine the background color that corresponds to your chosen colors primary, secondary and inverted options. Default in this scenario refers to a transparent background.
Screen adaption
The automatic inpage navigation refers to the chapters. Therefore, you must first create chapters in the Backend where you want to use the Automatic Inpage Navigation. If no element name is created in the field 'name of the element' in the chapter settings, a standard text with 'no title' is automatically displayed in the inpage navigation. Also please be aware that the order of the links is automatically determined by the order of the elements as you have created them in the Backend.
Worth noting: Chapters hidden in the back end ('disabled') are only displayed in the Frontend once they have been enabled.
Responsive: Please note that in the mobile view, to fit the size of the screen better,, the Inpage Navigation is displayed with a dropdown menu. This does mean that all the links of the table of contents are not displayed at the same time. Click on the arrow to open the dropdown menu.