diff --git a/_includes/nav.html b/_includes/nav.html
index 573e1f9..603d8d3 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,51 +1,55 @@
-<nav role="navigation" aria-label="Main navigation">
-  <ul class="navigation-list">
-    {%- assign ordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order != nil" -%}
-    {%- assign unordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order == nil" -%}
-    {%- if site.nav_sort == 'case_insensitive' -%}
-      {%- assign sorted_ordered_pages_list = ordered_pages_list | sort_natural:"nav_order" -%}
-      {%- assign sorted_unordered_pages_list = unordered_pages_list | sort_natural:"title" -%}
-    {%- else -%}
-      {%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
-      {%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
-    {%- endif -%}
-    {%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
-    {%- for node in pages_list -%}
-      {%- unless node.nav_exclude -%}
-        {%- if node.parent == nil and node.title -%}
-          <li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
-            {%- if page.parent == node.title or page.grand_parent == node.title -%}
-              {%- assign first_level_url = node.url | absolute_url -%}
-            {%- endif -%}
-            <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
-            {%- if node.has_children -%}
-              {%- assign children_list = pages_list | where: "parent", node.title -%}
-              <ul class="navigation-list-child-list ">
-                {%- for child in children_list -%}
-                {%- unless child.nav_exclude -%}
-                  <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
-                    {%- if page.url == child.url or page.parent == child.title -%}
-                      {%- assign second_level_url = child.url | absolute_url -%}
-                    {%- endif -%}
-                    <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
-                    {%- if child.has_children -%}
-                        {%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
-                        <ul class="navigation-list-child-list">
-                        {%- for grand_child in grand_children_list -%}
-                          <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
-                            <a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
-                          </li>
-                        {%- endfor -%}
-                      </ul>
-                    {%- endif -%}
-                  </li>
-                {%- endunless -%}
-                {%- endfor -%}
-              </ul>
-            {%- endif -%}
-          </li>
-        {%- endif -%}
-      {%- endunless -%}
-    {%- endfor -%}
-  </ul>
-</nav>
+<ul class="nav-list">
+  {%- assign ordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order != nil" -%}
+  {%- assign unordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order == nil" -%}
+  {%- if site.nav_sort == 'case_insensitive' -%}
+    {%- assign sorted_ordered_pages_list = ordered_pages_list | sort_natural:"nav_order" -%}
+    {%- assign sorted_unordered_pages_list = unordered_pages_list | sort_natural:"title" -%}
+  {%- else -%}
+    {%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
+    {%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
+  {%- endif -%}
+  {%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
+  {%- for node in pages_list -%}
+    {%- unless node.nav_exclude -%}
+      {%- if node.parent == nil and node.title -%}
+        <li class="nav-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
+          {%- if page.parent == node.title or page.grand_parent == node.title -%}
+            {%- assign first_level_url = node.url | absolute_url -%}
+          {%- endif -%}
+          {%- if node.has_children -%}
+            <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
+          {%- endif -%}
+          <a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
+          {%- if node.has_children -%}
+            {%- assign children_list = pages_list | where: "parent", node.title -%}
+            <ul class="nav-list ">
+            {%- for child in children_list -%}
+              {%- unless child.nav_exclude -%}
+                <li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
+                  {%- if page.url == child.url or page.parent == child.title -%}
+                    {%- assign second_level_url = child.url | absolute_url -%}
+                  {%- endif -%}
+                  {%- if child.has_children -%}
+                    <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
+                  {%- endif -%}
+                  <a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
+                  {%- if child.has_children -%}
+                    {%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
+                    <ul class="nav-list">
+                    {%- for grand_child in grand_children_list -%}
+                      <li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
+                        <a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
+                      </li>
+                    {%- endfor -%}
+                    </ul>
+                  {%- endif -%}
+                </li>
+              {%- endunless -%}
+            {%- endfor -%}
+            </ul>
+          {%- endif -%}
+        </li>
+      {%- endif -%}
+    {%- endunless -%}
+  {%- endfor -%}
+</ul>
diff --git a/_layouts/default.html b/_layouts/default.html
index de5c722..7569d90 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -4,7 +4,7 @@ layout: table_wrappers
 
 <!DOCTYPE html>
 
-<html lang="{{ site.lang | default: "en-US" }}">
+<html lang="{{ site.lang | default: 'en-US' }}">
 {% include head.html %}
 <body>
   <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
@@ -12,54 +12,59 @@ layout: table_wrappers
       <title>Link</title>
       <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
     </symbol>
+    <symbol id="arrow-right" viewBox="0 0 24 24">
+      <title>Expand</title>
+      <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
+    </symbol>
   </svg>
 
   <div class="page-wrap">
     <div class="side-bar">
       <div class="site-header">
         <a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
-        <button class="menu-button fs-3 js-main-nav-trigger" data-text-toggle="Hide" type="button">Menu</button>
+        <button id="site-nav-trigger" class="site-button" data-text-toggle="Hide" type="button">Menu</button>
       </div>
-
-      <div class="navigation main-nav js-main-nav">
+      <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
         {% include nav.html %}
-      </div>
+      </nav>
       <footer class="site-footer">
-        <p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
+        This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
       </footer>
     </div>
-    <div class="main-content-wrap js-main-content" tabindex="0">
-      <div class="main-content" id="top">
-        <div class="page-header js-page-header">
+    <div id="main-wrap" class="main-wrap" tabindex="0">
+      <div class="main" id="top">
+        <div id="main-header" class="main-header">
           {% if site.search_enabled != false %}
-          <div class="search">
-            <div class="search-input-wrap">
-              <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
-              <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
+            <div class="search">
+              <div class="search-input-wrap">
+                <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
+                <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
+              </div>
+              <div id="search-results" class="search-results"></div>
             </div>
-            <div class="js-search-results search-results-wrap"></div>
-          </div>
           {% endif %}
           {% if site.aux_links != nil %}
-            <ul class="list-style-none text-small aux-nav">
-              {% for link in site.aux_links %}
-                <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}">
-                  <a href="{{ link.last }}"
-                    {% if site.aux_links_new_tab %}
-                    target="_blank" rel="noopener noreferrer"
-                    {% endif %}
-                  >
+            <nav aria-label="Auxiliary" class="aux-nav">
+              <ul class="aux-nav-list">
+                {% for link in site.aux_links %}
+                  <li class="aux-nav-list-item">
+                    <a href="{{ link.last }}"
+                      {% if site.aux_links_new_tab %}
+                      target="_blank" rel="noopener noreferrer"
+                      {% endif %}
+                    >
                     {{ link.first }}
-                  </a>
-                </li>
-              {% endfor %}
-            </ul>
+                    </a>
+                  </li>
+                {% endfor %}
+              </ul>
+            </nav>
           {% endif %}
         </div>
-        <div class="page">
+        <div class="main-content-wrap">
           {% unless page.url == "/" %}
             {% if page.parent %}
-              <nav class="breadcrumb-nav">
+              <nav aria-label="Breadcrumb" class="breadcrumb-nav">
                 <ol class="breadcrumb-nav-list">
                   {% if page.grand_parent %}
                     <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
@@ -72,64 +77,62 @@ layout: table_wrappers
               </nav>
             {% endif %}
           {% endunless %}
-          <div id="main-content" class="page-content" role="main">
+          <div id="main-content" class="main-content" role="main">
             {% if site.heading_anchors != false %}
               {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#link\"></use></svg>" anchorClass="anchor-heading" %}
             {% else %}
               {{ content }}
             {% endif %}
 
-          {% if page.has_children == true and page.has_toc != false %}
-            <hr>
-            <h2 class="text-delta">Table of contents</h2>
-            <ul>
-              {%- assign children_list = pages_list | where: "parent", node.title -%}
-              {% for child in children_list %}
-                {% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %}
-                <li>
-                  <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
-                </li>
+            {% if page.has_children == true and page.has_toc != false %}
+              <hr>
+              <h2 class="text-delta">Table of contents</h2>
+              <ul>
+                {%- assign children_list = pages_list | where: "parent", node.title -%}
+                {% for child in children_list %}
+                  {% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %}
+                    <li>
+                      <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
+                    </li>
+                  {% endif %}
+                {% endfor %}
+              </ul>
+            {% endif %}
+
+            {% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
+              <hr>
+              <footer>
+                {% if site.back_to_top %}
+                  <p><a href="#top">{{ site.back_to_top_text }}</a></p>
+                  {% endif %}
+                {% if site.footer_content != nil %}
+                  <p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
                 {% endif %}
-              {% endfor %}
-            </ul>
-          {% endif %}
 
-          {% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
-            <hr>
-            <footer>
-              {% if site.back_to_top %}
-              <p><a href="#top">{{ site.back_to_top_text }}</a></p>
-              {% endif %}
-              {% if site.footer_content != nil %}
-              <p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
-              {% endif %}
-
-              {% if site.last_edit_timestamp or site.gh_edit_link %}
-                <div class="d-flex mt-2">
-                  {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
-                  <p class="text-small text-grey-dk-000 mb-0 mr-2">
-                  Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
-                  </p>
-                  {% endif %}
-                  {%
-                  if
-                  site.gh_edit_link and
-                  site.gh_edit_link_text and
-                  site.gh_edit_repository and
-                  site.gh_edit_branch and
-                  site.gh_edit_view_mode
-
-                  %}
-                  <p class="text-small text-grey-dk-000 mb-0">
-                  <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}">{{ site.gh_edit_link_text }}</a>
-                  </p>
-                  {% endif %}
-                </div>
-              {% endif %}
-
-            </footer>
-          {% endif %}
+                {% if site.last_edit_timestamp or site.gh_edit_link %}
+                  <div class="d-flex mt-2">
+                    {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
+                      <p class="text-small text-grey-dk-000 mb-0 mr-2">
+                        Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
+                      </p>
+                    {% endif %}
+                    {% if
+                      site.gh_edit_link and
+                      site.gh_edit_link_text and
+                      site.gh_edit_repository and
+                      site.gh_edit_branch and
+                      site.gh_edit_view_mode
+                    %}
+                      <p class="text-small text-grey-dk-000 mb-0">
+                        <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}">{{ site.gh_edit_link_text }}</a>
+                      </p>
+                    {% endif %}
+                  </div>
+                {% endif %}
+              </footer>
+            {% endif %}
 
+          </div>
         </div>
       </div>
     </div>
diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss
index 9a0b9ea..a25f449 100644
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -14,3 +14,4 @@ $base-button-color: $grey-dk-250;
 $code-background-color: $grey-dk-250;
 $search-background-color: $grey-dk-250;
 $table-background-color: $grey-dk-250;
+$feedback-color: darken($sidebar-color, 3%);
diff --git a/_sass/content.scss b/_sass/content.scss
index 7ab23d8..965c9c8 100644
--- a/_sass/content.scss
+++ b/_sass/content.scss
@@ -5,7 +5,7 @@
 //
 // stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
 
-.page-content {
+.main-content {
   line-height: $content-line-height;
 
   ol,
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 79169e4..720ac1d 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -37,7 +37,7 @@
   }
 }
 
-.main-content-wrap {
+.main-wrap {
   @include mq(md) {
     position: absolute;
     top: 0;
@@ -48,9 +48,13 @@
     overflow-x: hidden;
     overflow-y: scroll;
   }
+
+  &:focus {
+    outline: none;
+  }
 }
 
-.main-content {
+.main {
   @include mq(md) {
     position: relative;
     max-width: $content-width;
@@ -64,11 +68,7 @@
   }
 }
 
-.js-main-content:focus {
-  outline: none;
-}
-
-.page {
+.main-content-wrap {
   @include container;
   padding-top: $gutter-spacing-sm;
   padding-bottom: $gutter-spacing-sm;
@@ -79,7 +79,7 @@
   }
 }
 
-.page-header {
+.main-header {
   @include container;
   display: none;
   padding-top: $gutter-spacing-sm;
@@ -103,7 +103,7 @@
   }
 }
 
-.navigation,
+.site-nav,
 .site-header,
 .site-footer {
   width: 100%;
@@ -113,9 +113,7 @@
   }
 }
 
-.navigation {
-  @include container;
-
+.site-nav {
   @include mq(md) {
     padding-top: $sp-8;
     padding-bottom: $gutter-spacing-sm;
@@ -165,7 +163,7 @@
   }
 }
 
-.menu-button {
+.site-button {
   appearance: none;
   display: flex;
   height: 100%;
@@ -175,12 +173,18 @@
   text-transform: uppercase;
   background: transparent;
   border: 0;
+  @include fs-3;
 
   @include mq(md) {
     display: none;
   }
 }
 
+.site-title:hover,
+.site-button:hover {
+  background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
+}
+
 // stylelint-disable selector-max-type
 
 body {
@@ -202,6 +206,8 @@ body {
   left: 0;
   padding-top: $sp-4;
   padding-bottom: $sp-4;
+  color: $grey-dk-000;
+  @include fs-2;
 
   @include mq(md) {
     position: static;
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index c774904..16ff5f0 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -1,74 +1,133 @@
 //
 // Main nav, breadcrumb, etc...
 //
-.navigation-list {
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
+
+.nav-list {
   padding: 0;
   margin-top: 0;
   margin-bottom: 0;
   list-style: none;
-}
 
-.navigation-list-child-list {
-  padding-left: $sp-3;
-  list-style: none;
-
-  .navigation-list-link {
-    color: $nav-child-link-color;
-  }
-
-  .navigation-list-item {
+  .nav-list-item {
+    @include fs-4;
     position: relative;
+    margin: 0;
 
-    &::before {
+    @include mq(md) {
+      @include fs-3;
+    }
+
+    .nav-list-link {
+      display: block;
+      min-height: $nav-list-item-height-sm;
+      padding-top: $sp-1;
+      padding-bottom: $sp-1;
+      line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
+      @if $nav-list-expander-right {
+        padding-right: $nav-list-item-height-sm;
+        padding-left: $gutter-spacing-sm;
+      }
+      @else {
+        padding-right: $gutter-spacing-sm;
+        padding-left: $nav-list-item-height-sm;
+      }
+
+      @include mq(md) {
+        min-height: $nav-list-item-height;
+        line-height: #{$nav-list-item-height - 2 * $sp-1};
+        @if $nav-list-expander-right {
+          padding-right: $nav-list-item-height;
+          padding-left: $gutter-spacing;
+        }
+        @else {
+          padding-right: $gutter-spacing;
+          padding-left: $nav-list-item-height;
+        }
+      }
+
+      &.active {
+        font-weight: 600;
+        text-decoration: none;
+      }
+
+      &:hover,
+      &.active {
+        background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
+      }
+    }
+
+    .nav-list-expander {
       position: absolute;
-      margin-top: 0.3em;
-      margin-left: -0.8em;
-      color: rgba($body-text-color, 0.3);
-      content: "- ";
+      @if $nav-list-expander-right {
+        right: 0;
+      }
+      width: $nav-list-item-height-sm;
+      height: $nav-list-item-height-sm;
+      padding-top: #{$nav-list-item-height-sm / 4};
+      padding-right: #{$nav-list-item-height-sm / 4};
+      padding-bottom: #{$nav-list-item-height-sm / 4};
+      padding-left: #{$nav-list-item-height-sm / 4};
+      fill: $link-color;
+
+      @include mq(md) {
+        width: $nav-list-item-height;
+        height: $nav-list-item-height;
+        padding-top: #{$nav-list-item-height / 4};
+        padding-right: #{$nav-list-item-height / 4};
+        padding-bottom: #{$nav-list-item-height / 4};
+        padding-left: #{$nav-list-item-height / 4};
+      }
+
+      &:hover {
+        background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 100%);
+      }
+
+      @if $nav-list-expander-right {
+        svg {
+          transform: rotate(90deg);
+        }
+      }
+    }
+
+    > .nav-list {
+      display: none;
+      padding-left: $sp-3;
+      list-style: none;
+
+      .nav-list-item {
+        position: relative;
+
+        .nav-list-link {
+          color: $nav-child-link-color;
+        }
+
+        .nav-list-expander {
+          fill: $nav-child-link-color;
+        }
+      }
     }
 
     &.active {
-      &::before {
-        color: $body-text-color;
+      > .nav-list-expander svg {
+        @if $nav-list-expander-right {
+          transform: rotate(-90deg);
+        }
+        @else {
+          transform: rotate(90deg);
+        }
+      }
+
+      > .nav-list {
+        display: block;
       }
     }
   }
 }
 
-.navigation-list-item {
-  @include fs-4;
-  margin: 0;
-
-  @include mq(md) {
-    @include fs-3;
-  }
-
-  .navigation-list-child-list {
-    display: none;
-  }
-
-  &.active {
-    .navigation-list-child-list {
-      display: block;
-    }
-  }
-}
-
-.navigation-list-link {
-  display: block;
-  padding-top: $sp-1;
-  padding-bottom: $sp-1;
-
-  &.active {
-    font-weight: 600;
-    color: $body-heading-color;
-    text-decoration: none;
-  }
-}
-
 // Small screen nav
 
-.main-nav {
+.site-nav {
   display: none;
 
   &.nav-open {
@@ -81,9 +140,27 @@
 
 .aux-nav {
   align-self: center;
+
+  .aux-nav-list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    @include fs-2;
+  }
+
+  .aux-nav-list-item {
+    display: inline-block;
+    margin-right: $sp-2;
+    @include fs-2;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
 }
 
 // Breadcrumb nav
+
 .breadcrumb-nav {
   @include mq(md) {
     margin-top: -$sp-4;
diff --git a/_sass/search.scss b/_sass/search.scss
index bef2df7..79c3cfd 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -68,7 +68,7 @@
   order: 1;
 }
 
-.search-results-wrap {
+.search-results {
   position: absolute;
   z-index: 100;
   display: none;
@@ -112,7 +112,7 @@
 
   &:hover,
   &.active {
-    background-color: $sidebar-color;
+    background-color: $feedback-color;
   }
 
   @include mq(md) {
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 3665a36..2d155d3 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -57,6 +57,7 @@ $sidebar-color: $grey-lt-000 !default;
 $search-background-color: $white !default;
 $table-background-color: $white !default;
 $code-background-color: $grey-lt-000 !default;
+$feedback-color: darken($sidebar-color, 3%) !default;
 
 $body-text-color: $grey-dk-100 !default;
 $body-heading-color: $grey-dk-300 !default;
@@ -113,6 +114,9 @@ $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
 $nav-width: 264px !default;
 $nav-width-md: 248px !default;
+$nav-list-item-height: $sp-6 !default;
+$nav-list-item-height-sm: $sp-8 !default;
+$nav-list-expander-right: true;
 $content-width: 800px !default;
 $header-height: 60px !default;
 $search-results-width: 500px !default;
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 2edf7f4..b683c7f 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -24,17 +24,28 @@ jtd.onReady = function(ready) {
 // Show/hide mobile menu
 
 function initNav() {
-  const mainNav = document.querySelector('.js-main-nav');
-  const pageHeader = document.querySelector('.js-page-header');
-  const navTrigger = document.querySelector('.js-main-nav-trigger');
+  jtd.addEvent(document, 'click', function(e){
+    var target = e.target;
+    while (target && !(target.classList && target.classList.contains('nav-list-expander'))) {
+      target = target.parentNode;
+    }
+    if (target) {
+      e.preventDefault();
+      target.parentNode.classList.toggle('active');
+    }
+  });
+
+  const siteNav = document.getElementById('site-nav');
+  const mainHeader = document.getElementById('main-header');
+  const navTrigger = document.getElementById('site-nav-trigger');
 
   jtd.addEvent(navTrigger, 'click', function(e){
     e.preventDefault();
     var text = navTrigger.innerText;
     var textToggle = navTrigger.getAttribute('data-text-toggle');
 
-    mainNav.classList.toggle('nav-open');
-    pageHeader.classList.toggle('nav-open');
+    siteNav.classList.toggle('nav-open');
+    mainHeader.classList.toggle('nav-open');
     navTrigger.classList.toggle('nav-open');
     navTrigger.innerText = textToggle;
     navTrigger.setAttribute('data-text-toggle', text);
@@ -93,8 +104,8 @@ function initSearch() {
   function searchResults(index, data) {
     var index = index;
     var docs = data;
-    var searchInput = document.querySelector('.js-search-input');
-    var searchResults = document.querySelector('.js-search-results');
+    var searchInput = document.getElementById('search-input');
+    var searchResults = document.getElementById('search-results');
 
     function hideResults() {
       searchResults.innerHTML = '';
@@ -282,8 +293,8 @@ function initSearch() {
 // Focus
 
 function pageFocus() {
-  var mainContent = document.querySelector('.js-main-content');
-  mainContent.focus();
+  var mainWrap = document.getElementById('main-wrap');
+  mainWrap.focus();
 }
 
 // Switch theme