diff --git a/documentation/v2/body.html b/documentation/v2/body.html
index e08b3875..591950bc 100644
--- a/documentation/v2/body.html
+++ b/documentation/v2/body.html
@@ -1,19 +1,9 @@
-<nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
-  <a class="navbar-brand" href="#"><%= include('documentation/images/logo.svg') %></a>
-  <button type="button" class="navbar-menu-button hidden-lg-up" data-toggle="offcanvas" aria-label="Toggle navigation">
-    <div class="menu-button">
-      <span></span>
-      <span></span>
-      <span></span>
-      <span></span>
-    </div>
-  </button>
-</nav>
+<%= include('navbar.html') %>
 
 <div class="container-fluid" id="top">
   <div class="row row-offcanvas row-offcanvas-left">
-    <nav class="sidebar col-xs-12 col-lg-3 sidebar-offcanvas">
-      <%= include('nav.html') %>
+    <nav class="sidebar sidebar-offcanvas col-xs-12 col-lg-3">
+      <%= include('sidebar.html') %>
     </nav>
     <main class="main col-xs-12 col-lg-9 offset-lg-3">
 
diff --git a/documentation/v2/docs.coffee b/documentation/v2/docs.coffee
index 53e8a342..c267917e 100644
--- a/documentation/v2/docs.coffee
+++ b/documentation/v2/docs.coffee
@@ -1,10 +1,21 @@
 $(document).ready ->
   # Mobile navigation
-  $('[data-toggle="offcanvas"]').click ->
+  toggleSidebar = ->
     $('.menu-button, .row-offcanvas').toggleClass 'active'
 
+  $('[data-toggle="offcanvas"]').click toggleSidebar
+
+  $('[data-action="sidebar-nav"]').click (event) ->
+    if $('.menu-button').is(':visible')
+      event.preventDefault()
+      toggleSidebar()
+      setTimeout ->
+        window.location = event.target.href
+      , 260 # Wait for the sidebar to slide away before navigating
+
 
   # Initialize Scrollspy for sidebar navigation; http://v4-alpha.getbootstrap.com/components/scrollspy/
+  # See also http://www.codingeverything.com/2014/02/BootstrapDocsSideBar.html and http://jsfiddle.net/KyleMit/v6zhz/
   $('body').scrollspy
     target: '#contents'
     offset: Math.round $('main').css('padding-top').replace('px', '')
diff --git a/documentation/v2/docs.css b/documentation/v2/docs.css
index 05dae4cd..363a8746 100644
--- a/documentation/v2/docs.css
+++ b/documentation/v2/docs.css
@@ -35,14 +35,35 @@ a:focus, a:hover, a:active {
 /*
  * Header
  */
+.navbar-fixed-top {
+  height: 3.5rem;
+}
+
 .navbar-brand {
   height: 2em;
+  margin-right: 2em;
 }
 
 .navbar-dark path {
   fill: #fff;
 }
 
+.navbar-nav {
+  font-family: Lato;
+  font-weight: 400;
+  font-size: 1.1em;
+}
+
+.navbar-nav .nav-link {
+  padding-left: 0.6em;
+  padding-right: 0.6em;
+  border-radius: 0.4em;
+}
+.navbar-nav .nav-link:hover,
+.navbar-nav .nav-link:active {
+  background-color: #4e342e;
+}
+
 /* Adapted from https://codepen.io/GeoffreyBooth/pen/QGzwYK */
 .navbar-menu-button,
 .navbar-menu-button:focus {
@@ -109,41 +130,45 @@ a:focus, a:hover, a:active {
 .sidebar {
   background-color: #efebe9;
   border-right: 1px solid #eee;
-  position: fixed;
-  top: 0;
+  top: 3.5rem;
   bottom: 0;
   left: 0;
   z-index: 1000;
   display: block;
-  padding-top: 1.3em;
-  padding-left: 1.6em;
-  padding-right: 1.6em;
-  overflow-x: hidden;
+  padding: 0;
+}
+.sidebar .contents {
+  height: 100%;
   /* Scrollable contents if viewport is shorter than content */
   overflow-y: auto;
+  overflow-x: hidden;
   font-family: 'Alegreya Sans';
   font-weight: 400;
   font-size: 1.2em;
   line-height: 2;
 }
-.sidebar::-webkit-scrollbar {
-  display: none;
-}
 @media screen and (max-width: 991px) {
   .sidebar .contents {
     position: fixed;
-  }0
+    height: calc(100% - 3.5rem);
+    padding: 1em 1.6em;
+  }
 }
 @media screen and (min-width: 992px) {
   .sidebar {
-    /* Push below header bar */
-    margin-top: 3.5rem;
+    position: fixed;
+  }
+  .sidebar .contents {
+    padding: 1.3em;
+  }
+  .sidebar .contents::-webkit-scrollbar {
+    display: none;
   }
 }
 
-.nav-link.active,
-.nav-link.active, a:hover,
-.nav-link.active, a:focus {
+.sidebar .nav-link.active,
+.sidebar .nav-link.active a:hover,
+.sidebar .nav-link.active a:focus {
   font-weight: 800;
 }
 
@@ -162,25 +187,31 @@ a:focus, a:hover, a:active {
     position: relative;
     transition: all .25s ease-in-out;
   }
-
   .row-offcanvas-left {
-   left: 0;
+    left: 0;
   }
-
-  .row-offcanvas-left .sidebar-offcanvas {
-    left: -66.667%;
-  }
-  .row-offcanvas-right.active {
-    right: calc(66.667% + 1em);
-  }
-
-  .row-offcanvas-left.active {
-    left: calc(66.667% + 1em);
-  }
-
   .sidebar-offcanvas {
     position: absolute;
     top: 0;
+  }
+}
+@media screen and (max-width: 767px) {
+  .row-offcanvas-left .sidebar-offcanvas {
+    left: -100%;
+  }
+  .row-offcanvas-left.active {
+    left: calc(100% + 30px)
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 991px) {
+  .row-offcanvas-left .sidebar-offcanvas {
+    left: calc(-66.667% - 15px);
+    width: 66.667%;
+  }
+  .row-offcanvas-left.active {
+    left: calc(66.667% + 30px);
+  }
+  .row-offcanvas-left .sidebar-offcanvas .contents {
     width: 66.667%;
   }
 }
diff --git a/documentation/v2/nav.html b/documentation/v2/nav.html
deleted file mode 100644
index dae21947..00000000
--- a/documentation/v2/nav.html
+++ /dev/null
@@ -1,119 +0,0 @@
-<nav class="contents" id="contents">
-  <ul class="nav">
-    <li class="nav-item">
-      <a href="#top" class="nav-link active">Overview</a>
-    </li>
-    <li class="nav-item">
-      <a href="#installation" class="nav-link">Installation</a>
-    </li>
-    <li class="nav-item">
-      <a href="#usage" class="nav-link">Usage</a>
-    </li>
-    <li class="nav-item">
-      <a href="#language" class="nav-link">Language Reference</a>
-      <ul class="nav">
-        <li class="nav-item">
-          <a href="#functions" class="nav-link">Functions</a>
-        </li>
-        <li class="nav-item">
-          <a href="#strings" class="nav-link">Strings</a>
-        </li>
-        <li class="nav-item">
-          <a href="#objects-and-arrays" class="nav-link">Objects and Arrays</a>
-        </li>
-        <li class="nav-item">
-          <a href="#comments" class="nav-link">Comments</a>
-        </li>
-        <li class="nav-item">
-          <a href="#lexical-scope" class="nav-link">Lexical Scoping and Variable Safety</a>
-        </li>
-        <li class="nav-item">
-          <a href="#conditionals" class="nav-link">If, Else, Unless, and Conditional Assignment</a>
-        </li>
-        <li class="nav-item">
-          <a href="#splats" class="nav-link">Splats…</a>
-        </li>
-        <li class="nav-item">
-          <a href="#loops" class="nav-link">Loops and Comprehensions</a>
-        </li>
-        <li class="nav-item">
-          <a href="#slices" class="nav-link">Array Slicing and Splicing</a>
-        </li>
-        <li class="nav-item">
-          <a href="#expressions" class="nav-link">Everything is an Expression</a>
-        </li>
-        <li class="nav-item">
-          <a href="#operators" class="nav-link">Operators and Aliases</a>
-        </li>
-        <li class="nav-item">
-          <a href="#existential-operator" class="nav-link">Existential Operator</a>
-        </li>
-        <li class="nav-item">
-          <a href="#classes" class="nav-link">Classes, Inheritance, and Super</a>
-        </li>
-        <li class="nav-item">
-          <a href="#destructuring" class="nav-link">Destructuring Assignment</a>
-        </li>
-        <li class="nav-item">
-          <a href="#fat-arrow" class="nav-link">Bound and Generator Functions</a>
-        </li>
-        <li class="nav-item">
-          <a href="#embedded" class="nav-link">Embedded JavaScript</a>
-        </li>
-        <li class="nav-item">
-          <a href="#switch" class="nav-link">Switch and Try/Catch</a>
-        </li>
-        <li class="nav-item">
-          <a href="#comparisons" class="nav-link">Chained Comparisons</a>
-        </li>
-        <li class="nav-item">
-          <a href="#regexes" class="nav-link">Block Regular Expressions</a>
-        </li>
-        <li class="nav-item">
-          <a href="#tagged-template-literals" class="nav-link">Tagged Template Literals</a>
-        </li>
-        <li class="nav-item">
-          <a href="#modules" class="nav-link">Modules</a>
-        </li>
-      </ul>
-    </li>
-    <li class="nav-item">
-      <a href="#literate" class="nav-link">Literate CoffeeScript</a>
-    </li>
-    <li class="nav-item">
-      <a href="#source-maps" class="nav-link">Source Maps</a>
-    </li>
-    <li class="nav-item">
-      <a href="#cake" class="nav-link">Cake, and Cakefiles</a>
-    </li>
-    <li class="nav-item">
-      <a href="#scripts" class="nav-link"><code>"text/coffeescript"</code> Script Tags</a>
-    </li>
-    <li class="nav-item">
-      <a href="#test" class="nav-link">Browser-Based Tests</a>
-    </li>
-    <li class="nav-item">
-      <a href="#resources" class="nav-link">Resources</a>
-      <ul class="nav">
-        <li class="nav-item">
-          <a href="#books">Books</a>
-        </li>
-        <li class="nav-item">
-          <a href="#screencasts">Screencasts</a>
-        </li>
-        <li class="nav-item">
-          <a href="#examples">Examples</a>
-        </li>
-        <li class="nav-item">
-          <a href="#chat">Chat</a>
-        </li>
-        <li class="nav-item">
-          <a href="#annotated-source">Annotated Source</a>
-        </li>
-      </ul>
-    </li>
-    <li class="nav-item">
-      <a href="#changelog" class="nav-link">Change Log</a>
-    </li>
-  </ul>
-</nav>
diff --git a/documentation/v2/navbar.html b/documentation/v2/navbar.html
new file mode 100644
index 00000000..b0cf4810
--- /dev/null
+++ b/documentation/v2/navbar.html
@@ -0,0 +1,17 @@
+<nav class="navbar navbar-dark navbar-fixed-top bg-inverse">
+  <a class="navbar-brand" href="#"><%= include('documentation/images/logo.svg') %></a>
+  <nav class="nav navbar-nav float-xs-left hidden-md-down">
+    <a href="#try" class="nav-item nav-link">Try CoffeeScript</a>
+    <a href="#language" class="nav-item nav-link">Language Reference</a>
+    <a href="#resources" class="nav-item nav-link">Resources</a>
+    <a href="http://github.com/jashkenas/coffeescript/" class="nav-item nav-link">GitHub</a>
+  </nav>
+  <button type="button" class="navbar-menu-button hidden-lg-up" data-toggle="offcanvas" aria-label="Toggle sidebar">
+    <div class="menu-button">
+      <span></span>
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </button>
+</nav>
diff --git a/documentation/v2/sidebar.html b/documentation/v2/sidebar.html
new file mode 100644
index 00000000..e24e1620
--- /dev/null
+++ b/documentation/v2/sidebar.html
@@ -0,0 +1,119 @@
+<nav class="contents" id="contents">
+  <ul class="nav">
+    <li class="nav-item">
+      <a href="#top" class="nav-link" data-action="sidebar-nav">Overview</a>
+    </li>
+    <li class="nav-item">
+      <a href="#installation" class="nav-link" data-action="sidebar-nav">Installation</a>
+    </li>
+    <li class="nav-item">
+      <a href="#usage" class="nav-link" data-action="sidebar-nav">Usage</a>
+    </li>
+    <li class="nav-item">
+      <a href="#language" class="nav-link" data-action="sidebar-nav">Language Reference</a>
+      <ul class="nav">
+        <li class="nav-item">
+          <a href="#functions" class="nav-link" data-action="sidebar-nav">Functions</a>
+        </li>
+        <li class="nav-item">
+          <a href="#strings" class="nav-link" data-action="sidebar-nav">Strings</a>
+        </li>
+        <li class="nav-item">
+          <a href="#objects-and-arrays" class="nav-link" data-action="sidebar-nav">Objects and Arrays</a>
+        </li>
+        <li class="nav-item">
+          <a href="#comments" class="nav-link" data-action="sidebar-nav">Comments</a>
+        </li>
+        <li class="nav-item">
+          <a href="#lexical-scope" class="nav-link" data-action="sidebar-nav">Lexical Scoping and Variable Safety</a>
+        </li>
+        <li class="nav-item">
+          <a href="#conditionals" class="nav-link" data-action="sidebar-nav">If, Else, Unless, and Conditional Assignment</a>
+        </li>
+        <li class="nav-item">
+          <a href="#splats" class="nav-link" data-action="sidebar-nav">Splats…</a>
+        </li>
+        <li class="nav-item">
+          <a href="#loops" class="nav-link" data-action="sidebar-nav">Loops and Comprehensions</a>
+        </li>
+        <li class="nav-item">
+          <a href="#slices" class="nav-link" data-action="sidebar-nav">Array Slicing and Splicing</a>
+        </li>
+        <li class="nav-item">
+          <a href="#expressions" class="nav-link" data-action="sidebar-nav">Everything is an Expression</a>
+        </li>
+        <li class="nav-item">
+          <a href="#operators" class="nav-link" data-action="sidebar-nav">Operators and Aliases</a>
+        </li>
+        <li class="nav-item">
+          <a href="#existential-operator" class="nav-link" data-action="sidebar-nav">Existential Operator</a>
+        </li>
+        <li class="nav-item">
+          <a href="#classes" class="nav-link" data-action="sidebar-nav">Classes, Inheritance, and Super</a>
+        </li>
+        <li class="nav-item">
+          <a href="#destructuring" class="nav-link" data-action="sidebar-nav">Destructuring Assignment</a>
+        </li>
+        <li class="nav-item">
+          <a href="#fat-arrow" class="nav-link" data-action="sidebar-nav">Bound and Generator Functions</a>
+        </li>
+        <li class="nav-item">
+          <a href="#embedded" class="nav-link" data-action="sidebar-nav">Embedded JavaScript</a>
+        </li>
+        <li class="nav-item">
+          <a href="#switch" class="nav-link" data-action="sidebar-nav">Switch and Try/Catch</a>
+        </li>
+        <li class="nav-item">
+          <a href="#comparisons" class="nav-link" data-action="sidebar-nav">Chained Comparisons</a>
+        </li>
+        <li class="nav-item">
+          <a href="#regexes" class="nav-link" data-action="sidebar-nav">Block Regular Expressions</a>
+        </li>
+        <li class="nav-item">
+          <a href="#tagged-template-literals" class="nav-link" data-action="sidebar-nav">Tagged Template Literals</a>
+        </li>
+        <li class="nav-item">
+          <a href="#modules" class="nav-link" data-action="sidebar-nav">Modules</a>
+        </li>
+      </ul>
+    </li>
+    <li class="nav-item">
+      <a href="#literate" class="nav-link" data-action="sidebar-nav">Literate CoffeeScript</a>
+    </li>
+    <li class="nav-item">
+      <a href="#source-maps" class="nav-link" data-action="sidebar-nav">Source Maps</a>
+    </li>
+    <li class="nav-item">
+      <a href="#cake" class="nav-link" data-action="sidebar-nav">Cake, and Cakefiles</a>
+    </li>
+    <li class="nav-item">
+      <a href="#scripts" class="nav-link" data-action="sidebar-nav"><code>"text/coffeescript"</code> Script Tags</a>
+    </li>
+    <li class="nav-item">
+      <a href="#test" class="nav-link" data-action="sidebar-nav">Browser-Based Tests</a>
+    </li>
+    <li class="nav-item">
+      <a href="#resources" class="nav-link" data-action="sidebar-nav">Resources</a>
+      <ul class="nav">
+        <li class="nav-item">
+          <a href="#books">Books</a>
+        </li>
+        <li class="nav-item">
+          <a href="#screencasts">Screencasts</a>
+        </li>
+        <li class="nav-item">
+          <a href="#examples">Examples</a>
+        </li>
+        <li class="nav-item">
+          <a href="#chat">Chat</a>
+        </li>
+        <li class="nav-item">
+          <a href="#annotated-source">Annotated Source</a>
+        </li>
+      </ul>
+    </li>
+    <li class="nav-item">
+      <a href="#changelog" class="nav-link" data-action="sidebar-nav">Change Log</a>
+    </li>
+  </ul>
+</nav>