Originally developed for a private client, TouchNav emulates the navigation button scrolling effect starting to become commonplace on the websites of some larger retailers and businesses. Unlike a traditional 'carousel', there are no previous / next controls shown. Instead, the user swipes the buttons left and right using finger gestures on their screen or with the scroll gestures on a mouse or touch pad. Overflowing buttons always render in a single line and extend off the right side of the page. A background can be applied to TouchNav and its certainly possible to combine it with other popular stacks like Shady.

In modern web browsers, the normal horizontal scrollbars can be hidden and links can be scrolled using the mouse wheel or two-finger mouse gesture on laptops and desktops. Just about all aspects of the button colouring and styling is easily changed within the TouchNav settings.

You've got five options for setting up your links inside TouchNav; including breadcrumbs, HTML markup, manually added links (using sub-stacks), parent page links taken from your theme and sub-page links taken from your theme.

Example

This is the TouchNav stack with the default style and colour settings applied. The fourth link (about) has a class of 'current' applied, so you can see how the current page link would normally get styled.



Setup

TouchNav is compatible with most themes and frameworks. You can often fit it into most parts of a page. Multiple TouchNav stacks can be safely used on the same page. It can be setup in the following way:
  1. Install TouchNav in the normal way.
  2. From your Stacks Library, search for 'touchnav'.
  3. Drag and drop a copy of TouchNav into the page.
  4. From the configuration settings, choose where to source your navigation links from.
  5. Preview the page to see your navigation layout start to take shape.
  6. Within the Stacks side panel, you can customise many other aspects of TouchNav.
  7. Keep previewing the page, to see your applied changes that effect.
  8. Save and publish or export your website as normal, when done.

Current or current ancestor pages not marked?

Traditionally the RapidWeaver theme API required current page links to have a class of current and ancestor pages to have a class of currentAncestor. This is what stacks like TouchNav rely on, to denote what page is currently being viewed. Over the years, some theme developers have deviated from the official API recommendations, and devised other names for current and current ancestor pages. So if these pages are not marked as such in TouchNav, there is a good chance you'll need to go into the TouchNav Advanced Settings and update your class names accordingly. If you are unsure what to enter, please speak with the theme developer or ask on the forums.