Table Of Contents

Scroll Navigation widget

How to Use Scroll Navigation Widget

The documentation narrated below is about how to use the Scroll Navigation widget. You have to overcome some tricky parts while using the widget. Hopefully, you will get a good company.

So, read the whole doc.

To Insert Widget

inserting Scroll Navigation widget

Inserting widget, it is just a matter of dragging and dropping. As you see in the screenshot above, drag the Elementor Scroll navigation widget inside the page.

Content Tab

Using the Content Tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot in designing the single page navigation.

Now, I’m going to show the sections of the tab and how they work behind the widget.


Nav Items:

scrollNavigation 2 - BdThemes

Just, go to the Content tab > Additional.

After dragging and dropping the widget in a new section, you will get a list group. The list is not limited, you can add a new list in the group just by clicking on the ADD ITEM button for the Scroll Navigation widget.

scrollNavigation 3 - BdThemes

You can edit every single list item(repeater). Simply, hit on the List Item and edit the field found in the List Item. Then, add Nav Title (like Section One), Link (such as #section-1; read the Section CSS ID (N.B) below) and Icon. Look at the screenshot above.

scrollNavigation 5 - BdThemes

One more thing, if you want you can set Nav View (Text/ Dots). Besides, you may go for the switcher buttons Vertical Nav and Fixed Nav. So, View the screenshot above.

Section CSS ID

scrollNavigation 4 - BdThemes

N.B: You’ve to remember that we are adding a scrolling effect to the whole section. So, at first, you should make sure, you’ve set CSS ID selector from the Advanced tab. Simply, Hit/Click on the section > then, go to the Advanced tab > CSS ID (such as section-1). Do the same thing for the rest of the repeaters (taken as your requirement). Keep your eyes on the screenshot of the scroll nav.


scrollNavigation 6 - BdThemes

Simply, go to the Content tab > Additional.

Mostly, this section will let you adjust the navigation Alignment and Icon Position (After/ Before). In addition, here, you might use the scroll bar (menu height, etc.) to settle the scroll navigation.

Style Tab

Now, let’s work with the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design the Scroll Navigation widget. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Default Nav

Actually, from this single section, you’ll be able to style the layout.

scrollNavigation style 2 - BdThemes

Simply, go to the Style tab > Navbar Style (control) that will allow you to select navigation style (style 1, style 2, style 3) along with default one.

scrollNavigation style 1 - BdThemes

In general, here you have a chance to work with Border Type, Radius, Box Shadow, Padding, Margin and Typography.

Mostly, in this section, you might add Text and Background color under the Normal mode. At the same way, you can go for the Hover and Active mode.


scrollNavigation style 3 - BdThemes

Just, go to Default Nav > Normal.


scrollNavigation style 4 - BdThemes

Come to the Default Nav > Hover.


scrollNavigation style 5 - BdThemes

Follow the flow Default Nav > Active.

Video Assist

In conclusion, though our Scroll Navigation widget by element pack contains some tricky parts, hopefully, in the end, you have got the solution. You can stream the video clip above. And to get more ideas about this, visit the demo page.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.