Adding Sticky Navigation to a Page

Why Do It

We use this technique to help the user digest a lot of content and still be able to easily navigate around the page to the different subsections.

A sticky nav will work on multiple screen sizes. Here's what it looks like on a Desktop:
desktop version of sticky Navigation

Search Engines love this technique as it helps them understand how content on a page is structured and is inter related.

As the user scrolls past the sticky Nav, it stays fixed at the top of the page so that it is easier for the user to navigate around the page.

An example of page is at:

How to build your Sticky Nav.

  1. Open the page in the admin you want to add the Sticky Navigation to.
  2. Click on the Pages Settings Tab and Add following JS to the Javascript Tab.
  3. Click Save Settings
  4. Go to Page Settings > Styles
  5. Paste in this CSS code
  6. Hit Save
  7. Drag a custom 1 column html block onto page where you want the Sticky Nav to live.
  8. It will ask you what type of content and you should pick wysiwg
  9. Click into the new block to edit it and switch to code view by click the icon that looks like:
  10. Paste Sticky Nav HTML Code into the section youve've just built.
  11. Replace the Divider HTML with the Section HTML Code for each category section.
  12. Build rest of page
  13. Hit Save, reset Cache.

Buid Sticky NAV HTML

Enter each category that will be the section title on the page. ** Avoid using /(slash) or double quotes **

As you add Category names in the list below the sticky Nav HTML is automatically built in the textarea below.

Categories / TOC "Stops"

Sticky Nav HTML CODE

Build the Sticky Nav "Stops"

On the right are the Blocks of HTML that you'll insert into separate divider sections that will sit above each of the distinct sections that you'll be building. Each stop, is where the screen will scroll to when the user clicks the button on the Sticky Nav.

  1. Drag a Divider section onto the canvas for each of the stops built below.
  2. Click the html icon that looks like: , and then paste in the content for each stop.
  3. Build the content for each section that will live below the divider section.
  4. Save Changes