How To Use The Scrollnav Widget By Atomic Addons

The Scrollnav widget by Atomic Addons builds navigation for a long, one-page layout. Each link scrolls smoothly to a section of the page, and the link of the section in view is highlighted as visitors scroll. Show it as a row or column of text links, or as dots with tooltips, and fix it to the side of the screen if you like. This guide covers adding the widget, linking it to your sections and its options.

Enable the Scrollnav Widget

Scrollnav is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Scrollnav. You can also open the Menu / Navigation category.

4. 4

   Turn the Scrollnav widget on.

5. 5

   Click Save Settings.

Add the Scrollnav Widget

Scrollnav works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Scrollnav. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Each link points at a section by its ID, so give your sections IDs first: select a section or container, open its Advanced tab and type a name such as about in CSS ID.

Scrollnav

Open the widget and go to Content → Scrollnav:

1. 1

   Nav Items: The links. The list starts with Nav #1 to Nav #5, pointing at #section-1 to #section-5. Click Add Item for another, or drag the items to reorder them.

2. 2

   Nav View: Text (the default) shows the titles as links. Dots shows a small dot per item, with the title in a tooltip.

3. 3

   Vertical Nav: Stacks the links in a column instead of a row.

4. 4

   Fixed Nav: Fixes the navigation to the browser window, so it stays in view while visitors scroll. Where it sits is set in Additional Options.

Click an item to open its settings:

• Nav Title — the link text, or the tooltip text in the Dots view.
• Link — the section's ID with the # in front, such as #about. A page address works too, but only links to sections of the same page take part in the highlighting.
• Icon — an optional icon beside the title, in the Text view.

Additional Options

Content → Additional Options:

1. 1

   Alignment: Left (the default), center or right, per screen size. Hidden while Fixed Nav is on.

2. 2

   Nav Position: With Fixed Nav only: where on the screen the navigation sits, Center Left by default, or Top Left, Top Center, Top Right, Center, Center Right, Bottom Left, Bottom Center or Bottom Right.

3. 3

   Nav Offset: With Fixed Nav only: the space between the navigation and the screen edge, 0 to 250px.

4. 4

   Nav Spacing: The margin around each link, per screen size.

5. 5

   Menu Height: Text view only: the minimum height of the links, 20px to 150px.

6. 6

   Icon Position: Text view only: the icon After the title (the default) or Before it.

7. 7

   Icon Spacing: Text view only: the space between icon and title, 8px by default.

8. 8

   Target Offset: Where the page stops when a link is clicked, from -250px to 250px. A positive value stops that many pixels above the section, which keeps it clear of a sticky header. 0 by default.

Tooltip

With the Dots view, Content → Tooltip sets up the tooltips that show each item's title:

1. 1

   Animation: Shift-Toward (the default), Shift-Away, Fade, Scale or Perspective.

2. 2

   Placement: Which side of the dot the tooltip opens on: Right by default, or Top, Bottom or Left.

3. 3

   Offset: Moves the tooltip along the side of the dot.

4. 4

   Distance: Moves the tooltip away from the dot.

5. 5

   Arrow: Adds a small arrow pointing at the dot.

6. 6

   Trigger on Click: Shows the tooltip on click instead of on hover.

Style the Scrollnav

Everything below is on the Style tab. Each section shows only for the view it belongs to:

• Default Nav — the Text view. Navbar Style adds a line to the hovered and current link: Style 1 above it, Style 2 below it, Style 3 a soft highlight behind the lower half of the text, Style 4 an underline that grows from the left. The Normal, Hover and Active tabs set the text color, background, border, border radius, shadow, padding, margin, typography and icon color and size; Style Color colors the Navbar Style line.
• Dot Nav — the Dots view: Dots Size, background color, border, border radius, shadow and padding, with Hover and Active colors.
• Tooltip — the Dots view's tooltips: width, typography, text color and alignment, background, arrow color, padding, border, border radius and shadow.

Active styles the link of the section currently in view.