From ab56c4c7d339c4a948cc2c810b6a4b87ff593816 Mon Sep 17 00:00:00 2001
From: Nikolas Wise <nikolaswise@gmail.com>
Date: Tue, 18 Aug 2015 06:56:11 -0700
Subject: [PATCH] tidy and document third nav

---
 CHANGELOG.md                                     | 1 +
 docs/source/patterns/_third-nav.md               | 4 ++++
 docs/source/patterns/sample-code/_third-nav.html | 6 ++++--
 lib/sass/calcite-web/patterns/_third-nav.scss    | 2 +-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 884fb0aba..fcc7ea48f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 
 ### Added
 - `fade-in` class for fading in elements on page load
+- Responsive Javascript for the third nav.
 
 ## 0.11.3
 
diff --git a/docs/source/patterns/_third-nav.md b/docs/source/patterns/_third-nav.md
index cbfa0c44a..c7f9159e1 100644
--- a/docs/source/patterns/_third-nav.md
+++ b/docs/source/patterns/_third-nav.md
@@ -1 +1,5 @@
 Tertiary navigation is necessary only when the information architecture of the site requires three levels of hierarchy within pages. A breadcrumb component can also be used in this pattern.
+
+The third nav has a set of of Javascript bindings responsible for responsive behavior when the content of the third nav is greater than it's container.
+
+Only a single third nav can be on a page.
diff --git a/docs/source/patterns/sample-code/_third-nav.html b/docs/source/patterns/sample-code/_third-nav.html
index 335508be1..27f34171d 100644
--- a/docs/source/patterns/sample-code/_third-nav.html
+++ b/docs/source/patterns/sample-code/_third-nav.html
@@ -1,6 +1,7 @@
 <header class="third-nav">
+  <a href="#" class="icon-ui-left js-overflow-left nav-overflow-left"></a>
   <div class="grid-container">
-    <nav class="column-24" role="navigation" aria-labelledby="thirdnav">
+    <nav class="column-24 third-nav-container js-nav-overflow" role="navigation" aria-labelledby="thirdnav">
       <a class="third-nav-link is-active" href="#">Alpine</a>
       <a class="third-nav-link" href="#">Coastal</a>
       <a class="third-nav-link" href="#">Wetland</a>
@@ -8,4 +9,5 @@
       <a class="third-nav-link" href="#">Praire</a>
     </nav>
   </div>
-</header>
+  <a href="#" class="icon-ui-right js-overflow-right nav-overflow-right"></a>
+</header>
\ No newline at end of file
diff --git a/lib/sass/calcite-web/patterns/_third-nav.scss b/lib/sass/calcite-web/patterns/_third-nav.scss
index fd8c03367..a4bcbbc5f 100644
--- a/lib/sass/calcite-web/patterns/_third-nav.scss
+++ b/lib/sass/calcite-web/patterns/_third-nav.scss
@@ -25,7 +25,7 @@
     padding: 11px 6px;
     top: 0;
     margin: 0;
-    background-color: rgba(255,255,255,.8);
+    background-color: rgba($white, .8);
     display: none;
     &:before {
       padding-right: 0;