“One Page Scroll Navigation Widget” help your website visitors to navigate easily & improve the user experience on your website. You can easily add a section ID to each anchor link and set up your one page website within a few minutes. One Page Scroll Navigation offers an option for snapping to section. Your site visitors can easily navigate to an anchor point with just one click of a button.
Let’s look at each of the options in the “One Page Scroll Navigation Widget” below.
Install One Page Scroll Navigation Widget for Elementor #
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “One Page Scroll Navigation“
- Hover over the widget in the search results and click install
- Add your “One Page Scroll Navigation” widget to any Elementor Page
General Settings #
Gap
Set the gap between navigation items.
Tooltip Show On Hover
It will show tooltip on hover on navigation items.
Tooltip Show On Active
It will show tooltip on active navigation items.
Direction
Change the position of navigation items from left to right.
Enable Snap To Section
Snap to section by mouse wheel or up/down arrows.
Enable Snap Also on Mobile
Enable/Disable the snap option for mobile device.
Items Settings #
Manage the navigation items using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
Title
Set a title for navigation item.
Section ID
Type a section id to which this navigation item will navigate.
Icon
Choose an icon for navigation item.
One Page Scroll Navigation Widget Styling #
Style the widget with its wide range of styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Menu Item Styling #
Set the menu item background, color, size, icon size, and border.
Menu Item Hover Styling #
Style the background hover color, border width, and border color.
Menu Item Active Styling #
You can set the active background color, item color, border width and border color.
Tooltip Styling #
In this section, set the tooltip background, color, typography, radius, and padding.
Usage Examples #
Here are some live use cases for the One Page Scroll Navigation widget.
