Responsive Addons for Elementor (RAE) 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 Addons for Elementor (RAE) element, find the โResponsive Addons for Elementor (RAE) One Page Navigationโ from the Search option under the โELEMENTSโ tab. Simply just Drag & Drop the โResponsive Addons for Elementor (RAE) 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
Navigation Dots
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
Navigation Box
- 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
Navigation Dots
- 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 %
Tooltip
- 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 %
