Each menu item has a setting to define an element on the page that, when clicked, the item will cause the page to scroll to. The menu will then close when the scroll animation has completed.
Valid values are IDs or classes – for example #special-content or .user-info. Values must be valid jQuery selectors.
When clicked, if there is a matching element on the page, the menu will scroll your site to that element.
If the element does not exist on the current page, the menu will follow whatever link is set for that menu item. On the redirected page, ShiftNav will attempt to locate and immediately scroll to any matching element on that page.
As an example, let’s say you have an About page with a contact form that is half way down the page. The contact form is wrapped in a div with id="contact". Add a Page menu item for the About page. Set the Navigation Label in the WordPress menu item settings to “Contact”. Set the ShiftNav Scroll To setting to #contact. Then:
If you are on the About page, and the ‘Contact’ link is clicked, the page will scroll to the contact form.
If you are on any other page which does not contain a #contact div, the site will redirect to the About page and then scroll to the contact form.
Scroll Offset
If your scroll target is bumping up against the top of the site, or being hidden below a fixed top bar, you can adjust the Scroll Offset in the Control Panel > General Settings to space the scrolled element away from the top of the site.
