Joyride is a powerful way to communicate certain parts of a page to your user. Any element you declare on a page as a Joyride element will get a callout box and you can tour people through the page by these callouts. Let's give them a shot by adding a couple to our site. So, on or around line 212 and after our modal, let's add the following code:
<ol class="joyride-list" data-joyride>
<li data-id="joyride1" data-text="Next" data-options="tip_location: top">
<h4>Nav 2</h4>
<p>Here is Nav Two</p>
</li>
<li data-id="joyride2" data-button="End" data-options="tip_location: bottom">
<h4>Nav 3</h4>
<p>Here is Nav Three</p>
</li>
</ol>If you refresh your browser, you will notice that nothing happened; that is because we still need to tell Foundation where to add the Joyrides, so let's do that now. So let's find our Nav 2 and Nav 3 elements and add their proper "id's". So on lines 84, we added...