Scroll Navigation

< All Topics

If you are looking to create a classy one page website, this Scroll Navigation widget is a must. One page websites are in a trend nowadays. The navigation can be placed anywhere on the screen. Mostly, it is placed on the right or on the top.

Pro tip
Why not create one-page scroll navigation on your website. One page website is not only ways to use but is a design trend now. Website users will really like when they get everything on scroll.

How to use the Scroll Navigation Widget of The Plus Addons For Elementor

The Scroll Navigation widget comes with different styles and a plethora of customization options using which you can use to add scroll navigation to your websites.

Table Of Contents

General Steps

Search for the Scroll Navigation element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Audio Player widget. First, click on the Content tab.

1. Content

Scroll Navigation

Style

Select the Style for the Scroll Navigation here. We have provided 5 different styles to choose from.

Direction

Set the Direction of the Scroll Navigation here.

Select Style for Scroll Navigation widget.

Tooltip Display Style

Set the Tooltip Display Style here.

Scroll Navigation List

Add item here to the Scroll Navigation List.

Section Id – Add your section id here.
Tooltip – Enable tooltip here. Set the tooltip title here.
Icon – Set the icon here. You can choose any icon from FontAwesome or Icons Mind.

Page Scroll Connection

Enable and edit the Page Scroll Connection here.

Page Scroll Type

Select your preferred page scroll type. You can select anyone between Full Page, Page Piling, and Multi Scroll.

Page Scroll Connect ID

Enter your page scroll connect ID here.

2. Style

The Style tab is used for customizing the appearance of all the Scroll Navigation widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options

Navigation Style

Change the Icon Height/Width, Icon Spacing, color, and border type here.

Navigation Background

Enable and style the Navigation Background and Box Shadow options here.

Tooltip

Set the Navigation Tooltip Margin, Navigation Tooltip Padding, Alignment, Typography, Font color normal, Background Color, Tooltip height, Tooltip Arrow, Box Shadow, and Border Radius here.

Whole Background Style

Set the Whole Navigation offset, Inner padding, Background, Box Border, and Box Shadow here.

Extra Options

Enable and set the Show Menu Scroll Offset.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?