Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

Table Of Contents

Scroll Navigation widget

How to Use Scroll Navigation Widget

The Scroll Navigation widget is one of the most widely used menu widgets in Elementor. We have been seeing and using this tool on a huge number of websites. It’s fun and handy as well as packed with features.

Let’s see how to use this widget.

Inserting widget

inserting the Scroll Navigation widget

From the widget menu in the Elementor page editor, search for the Scroll Navigation widget and drag it inside your page.

To show the widgets’ applications properly, we created several other sections beforehand. You can also use a ready-page template from Element Pack Template Library in this case.

Content Tab

The content tab has all the base settings to design the layout of the content. For the Scroll Navigation widget, the content tab has 3 sections.


1 16 - BdThemes

In the first section, you will find options for adding or removing the navigation menu items. There are also options for selecting the nav type from Nav View and two switchers. These switchers are for making the scroll app navigation menu vertically aligned or fixed in position.

2 8 - BdThemes

Each nav item has a title field, a link field for a one page menu setup, and an icon selection.

Floating nav setup

3 7 - BdThemes

Using Dots as nav and turning on the vertical & fixed nav is a great way to make a floating navigation menu.

4 6 - BdThemes

Also, you have to go to the section settings of the vertical scroll css and add a higher value for Z-Index from Additional settings.


5 7 - BdThemes

Go to Content> Additional

Here, you can adjust the position of the navigation menu with the help of a bunch of options.


6 4 - BdThemes

Go to Content> Tooltip

This section holds the placement and animation options for the tooltip. You can set it to Trigger on Click by turning on the switcher also.

Note: The Tooltip section will only be visible for the Dots navigation. The default nav doesn’t have this setting.

Style tab

You can change the appearance of the Scroll navigation widget menu by colors, borders, and more using the style tab.

Dot Nav

7 3 - BdThemes

Go to Style> Dot Nav

Here, you will have options for increasing dot sizes, change color, add border, border radius & padding.

Note: the default nav has a slightly different set of options in the style tab.


8 2 - BdThemes

Go to Style> Tooltip

Lastly, you can change the color, typography, width, text alignment of the tooltip. Also, you can add borders, padding, and use box shadows.

Video assist

Still stuck?

Watch this quick video on the ScrollNav widget and visit the demo page for examples, provided by Bdthemes.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.