Introduction

About

How Scroll Nav Works

Scroll Nav is lightweight, fully customizable scroll menu plugin for DMS. This plugin comes with two sections:
  • Scroll Nav - Scroll & Fix. Similar to Scroll Spy.
  • Scroll Nav Fixed - Scroll menu fixed to the edge of the screen.
Scroll Nav goes through entire DOM in search for elements with scroll-header class (anchor elements) and creates menu item for each. Also, if anchor element has title attribute, it will be used as menu item title.

How to add scroll-header class

  1. Add "scroll-header" (without "") to any section/column/area through: Section Options -> Standard Options -> Styling Classes
  2. Use Scroll Header Pro, DMS section for creating beautiful scroll-ready headings. Just drag&drop section anywhere on the page, and menu item will be generated.
  3. Add custom HTML element anywhere in content/text area.
NOTICE: Element with scroll-header class must have unique id. Otherwise, Scroll Nav won't work.
Add Custom HTML Examples: <h3 id="unique-id1" class="scroll-header">My Heading</h3>

or

<div id="unique-id2" class ="scroll-header page-header" title="Menu Item Title">
   <h2>My Heading<small> and Subheading</small></h2>
</div>
Templates
Select blueprint css template that best suites your needs. Scroll Nav Templates
list-blueprint - classic list style. With the least styles applied. Suitable for developing custom template from scratch.
top-center-blueprint - top menu with center aligned menu items. Icon, title and subtitle are arranged one beneath the other.
top-inline-blueprint - top menu with left aligned menu items. Icon is floating left and title and subtitle are right to it, one beneath the other.
Scroll Nav Fixed Templates
top-center-blueprint - top menu with center aligned menu items. Icon, title and subtitle are arranged one beneath the other.
top-inline-blueprint - top menu with left aligned menu items. Icon is floating left and title and subtitle are right to it, one beneath the other.
left-blueprint - left fixed menu. Elements are arranged like in inline template.
right-blueprint - right fixed menu. Elements are arranged like in inline template.
Section Options
These options enable users to take full control over section's layout and functionality.
  • Mini Legend
    • Snav specific - Options specific for Scroll Nav section.
    • Snav Fixed specific - Options specific for Scroll Nav Fixed section.
  • Template Config
    Choose Template
    Explained above.
    Enable Animated Top Menu
    Snav specific
    Scroll Nav normally acts like ScrollSpy - sticks to the top of the viewport while scrolling the page.
    With this option enabled, Scroll Nav won't stick, but will appear from the top with animation. Test it yourself!
  • Layout Config
    Each menu item has three element positions. Choose for each position between:
    • Icon,
    • Title,
    • Subtitle and
    • None.
  • Scroll Nav (Fixed) Config
    Target Offset
    Adjust the stop point - position where the page will stop when you click on menu item.
    Enter number of pixels (positive or negative integer) to test it yourself (try i.e. 80 and -80 and see the difference when you click on the same menu item).
    Scroll Speed/Duration
    Make scrolling faster or slower. Enter the number of milliseconds to adjust scroll duration. Greater the number - smaller the speed.
    Scroll Menu Offset
    Snav specific
    Adjust point where menu sticks to the top. Enter number of pixels (positive or negative integer).
    Rarely used, but useful in specific cases.
    Scroll Menu Top Position
    Snav Fixed specific
    Css top attribute. Enter number of pixels (positive or negative integer).
  • Scroll To Top
    If enabled, "To Top" menu item will be added to the menu. Add title, subtitle and choose icon to customize.
  • Custom Link Item
    Add external link to the menu. It is automatically enabled if "custom link address" has value.
    Add title, subtitle and choose icon to customize.
    NOTICE: If you want to add link on the same site, add relative path to the page.
    If it is an external (of site) link, add full address (http://...).
  • Custom Menu Content
    Add title, subtitle and choose icon to customize each menu item (except "To Top" and "Custom Link").
  • Scroll Nav (Fixed) Font
    Change menu text font.
  • Hide Scroll Nav on Mobile Devices
    Hide Scroll Nav on Mobile Devices
    If you want to hide menu on small resolutions.
    Possible values:
    • Tablet Landscape - hide below 1024px.
    • Tablet - hide below 768px.
    • Mobile - hide below 600px.
    • Don't hide - ...
Style Options
Clone Specific Color Control!
Each section clone has independent color options.
  • Style Options allows user to control color of every element of Scroll Nav and Scroll Nav Fixed sections.
  • Background Colors
    • Scroll Nav Background Color
    • Menu Background Color
    • Menu Item Background Color
  • Icon & Text Colors
    • Icon Color
    • Icon size in pixels
    • Text Color
  • Active/Hover Colors
    • Hover/Active Item Background Color
    • Hover/Active Icon Color
    • Hover/Active Text Color