REA One Page Navigation

REA One Page Navigation gives you the flexibility to easily navigate through your one-page website. With the help of this element, you can create a beautiful one-page site and improve the overall user experience.

How to Activate One Page Navigation

To use this Responsive Elementor Addons element, find the ‘REA One Page Navigation’ from the Search option under the ‘ELEMENTS’ tab. Simply just Drag & Drop the ‘REA One Page Navigation’ into the ‘Drag widget here’ section.

Initially, this is how One Page Navigation would look like:

How to add Section ID for each Section

To add Section ID, click on the Section you want to modify.

Then head over to the ‘Advanced’ tab of that particular Section. Simply add the ‘Section ID’ of the navigation dots inside the CSS ID field.

Content

In this section, you can add a Section Title and Section ID & use the dropdown menu to choose an icon for the navigation dot.

Settings

Tooltip- You can use the toggle bar to enable/disable Tooltip on hover
Tooltip Arrow- Use the toggle button to show/hide the tooltip arrow
Scroll Wheel- You can use the toggle bar to enable/disable the Scroll wheel which uses a mouse wheel to navigate from one row to another
Scroll Keys- You can use the toggle bar to enable/disable the Scroll Keys which use UP and DOWN keys to navigate from one row to another
Row Top Offset- Use slider to set row top offset value
Scrolling Speed- Enter the value of scrolling speed, according to the value navigation will scroll

Style

Alignment- Using the icons, select between left, center, or right alignment
Background Type- Use the icons to choose between a solid or gradient background
Border Type- From the dropdown menu select between solid, double, dotted, dashed, or grooved
Border Radius- Enter a chosen value in the fields based on px or %
Margin- Enter a chosen value in the fields based on px or %
Padding- Enter a chosen value in the fields based on px or %
Box Shadow- Click the pencil icon to set the color and shadow options

Size- Adjust the size of the navigation dots using a slider
Spacing- Adjust the spacing between the navigation dots using a slider
Padding- Enter a chosen value in the fields based on px or %
Box Shadow- Click the pencil icon to set the color and shadow options
Normal/Hover/Active- Choose the appearance of the navigation dots on normal and hover and active states
Color- From the color picker, choose color
Background Color- From the color picker, choose the background color
Border Type- From the dropdown menu select between solid, double, dotted, dashed, or grooved
Border Radius- Enter a chosen value in the fields based on px or %

Background Color- From the color picker, choose the background color of the tooltip
Text Color- From the color picker, choose the color of the text
Typography- From the pencil icon, click to open the font option panel to choose the family, weight, transform, style, decoration, line height, and letter spacing options
Padding- Enter a chosen value in the fields based on px or %