The Scrollnav widget from Element Pack Pro lets you create smooth scrolling navigation for one-page websites. It helps users quickly jump to different sections with a fixed or vertical navigation menu. This documentation explains how to use and customize the ScrollNav widget in Elementor.
Enable The Scrollnav Widget
To use the Scrollnav widget from Element Pack, first, you have to enable the widget.
- Go to WordPress dashboard → Element Pack Plugin dashboard.
- Then, Click the Core Widgets Tab.
- Search the Scrollnav Widget Name.
- Enable the Scrollnav Widget.
- Hit the Save Settings Button.
Inserting The Scrollnav Widget
1. Go to the Elementor Editor Page and hit the “+” icon Button.
2. Search the Scrollnav name.
3. Drag the widget and drop it on the editor page.
Work With The Content Tab
Scrollnav Section
Go to Content → Scrollnav
1. Close Item: You can click on this close icon to close the scrollnav item.
2. Copy Item: You can click on the copy icon to duplicate the scrollnav item.
3. Add Item: You can click on this button to add more scrollnav items.
4. Nav View: You can choose the nav item view to text or dot with this option.
5. Vertical Nav: Enable the switcher to make the scrollnav items vertical with this option.
6. Fixed Nav: Enable the switcher to fix the scrollnav position with this option.
In each scrollnav item, we have options to customize the nav items. Let’s start describing those options –
1. Nav Title: You can make changes to the nav title with this option.
2. Link: This is the field where you can add the section ID with the “#” key to connect with sections.
3. Icon: You can add an icon to the nav items with this option.
Set Up CSS ID to Section
To connect the section with the Scrollnav, you need to add the CSS ID to the container/section. For this, you need to select the section/container and then go to the Advanced Tab > CSS ID and input the ID here that you used with the “#” key on the link field. You don’t need to add the “#” key here.
Additional Section
Go to Content → Additional
1. Alignment: You can adjust the position of the scrollnav items with this option.
2. Nav Spacing: You can adjust the space between the nav items with this option.
3. Menu Height: This option allows you to adjust the height of the scrollnav menu items.
4. Icon Position: You can set the position of the icons to before the text or after the text with this option.
5. Icon Spacing: You can adjust the space between the icon and the scrollnav menu items’ text with this option.
6. Target Offset: You can adjust the offset value here, which will work when you click and go to the targeted location.
Work with The Style Tab
Default Nav Section
Go to Style → Default Nav
1. Navbar Style: You can choose the style of the scrollnav menu items with this option.
In this section, we have three more tabs. These are Normal, Hover & Active. Let’s start with the Normal tab –
2. Text Color: You can change the nav menu items’ text color with this option.
3. Background Color: You can change the background color with this option.
4. Border Type: You can add and change the border types with this option.
5. Border Radius: You can control the roundness of the border with this option.
6. Box Shadow: You can add a shadow effect to the menu items field with this option.
7. Padding: You can adjust the inner space of the scrollnav menu items with this option.
8. Margin: You can adjust the space around the scrollnav menu items with this option.
9. Typography: Change the font family, size, weight, transform, style, decoration, line height, letter spacing, and word spacing from here.
10. Color: You can make changes to the icon color with this option.
11. Size: You can adjust the size of the icon with this option.
Now let’s proceed to the Hover Tab –
1. Text Color: You can change the scrollnav menu items’ text hover color with this option.
2. Background Color: You can make changes to the background hover color with this option.
3. Icon Color: You can make changes to the icon hover color with this option.
Now let’s proceed to the Active Tab –
1. Text Color: You can make changes to the scrollnav menu items’ active color with this option.
2. Background Color: You can make changes to the active background color with this option.
3. Icon Color: You can change the icon’s active color with this option.
All done! You have successfully customized the Scrollnav widget on your website.
Video Assist
You can also watch the video tutorial to learn more about the Scrollnav widget. Please visit the demo page for examples.
Thanks for being with us
