diff --git a/assets/styles/layouts/_top-nav.scss b/assets/styles/layouts/_top-nav.scss
index 838e3dee6..8ff4cb710 100644
--- a/assets/styles/layouts/_top-nav.scss
+++ b/assets/styles/layouts/_top-nav.scss
@@ -2,6 +2,8 @@
   display: flex;
   padding: .75rem .75rem .65rem;
   justify-content: space-between;
+  position: relative;
+  box-sizing: border-box;
 
   .influx-home {
     font-family: 'icomoon';
@@ -35,12 +37,21 @@
     }
   }
 
-  .selector-dropdowns {
+  .topnav-left {
+    z-index: 1;
+  }
+
+  .topnav-right {
     display: flex;
     position: absolute;
+    right: .75rem;
+    top: .75rem;
+  }
+
+  .selector-dropdowns {
+    display: flex;
     z-index: 100;
     right: 5.5rem;
-    transition: right .2s;
   }
 
   .dropdown {
@@ -110,6 +121,11 @@
     }
   }
 
+  .buttons {
+    display: flex;
+    margin-left: .5rem;
+  }
+
   .theme-switcher, #search-btn, .url-trigger {
     display: inline-block;
     padding: 0;
@@ -138,9 +154,12 @@
     font-size: 1.1rem;
     vertical-align: top;
     margin: .1rem 0 0 0;
+    z-index: 1;
   }
 
-  #search-btn {
+  .search-btn {
+    margin-top: .15rem;
+    width: 0;
     opacity: 0;
   }
 }
@@ -149,6 +168,27 @@
 ///////////////////////////////// MEDIA QUERIES ////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////
 
+@include media(medium){
+  .docs-home {
+    .long { display: none; }
+    .short:after { content: "s" }
+  }
+}
+
 @include media(small) {
   .icon-influx-logotype { display: none; }
+
+  .topnav { min-height: 5.5rem; }
+  .topnav-right {
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    width: 94%;
+  }
+  .search-btn { display: none; }
+
+  .selector-dropdowns {
+    width: 100%;
+    margin-top: .35rem;
+    .dropdown { flex-grow: 1; }
+  }
 }
diff --git a/assets/styles/sidebar-closed.scss b/assets/styles/sidebar-closed.scss
index 1e4223c51..6e3278bf7 100644
--- a/assets/styles/sidebar-closed.scss
+++ b/assets/styles/sidebar-closed.scss
@@ -23,8 +23,10 @@
 }
 
 .topnav {
-  #search-btn {
+  .search-btn {
     opacity: 1;
+    width: 30px;
+    transition: width .2s, opacity .2s .2s;
   }
   .selector-dropdowns {
     right: 7.5rem;
@@ -48,7 +50,7 @@
     white-space: normal;
   }
   .topnav {
-    #search-btn {
+    .search-btn {
       opacity: 0;
     }
     .selector-dropdowns {
diff --git a/assets/styles/sidebar-open.scss b/assets/styles/sidebar-open.scss
index 922914c2d..da106dad0 100644
--- a/assets/styles/sidebar-open.scss
+++ b/assets/styles/sidebar-open.scss
@@ -10,7 +10,9 @@
   }
 }
 
-#search-btn {
+.search-btn {
   opacity: 0;
-  display: none;
+  width: 0;
+  overflow: visible;
+  transition: opacity .2s, width .2s .2s !important;
 }
diff --git a/layouts/index.html b/layouts/index.html
index e2699f29a..f6be8b9ad 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -7,7 +7,7 @@
   <p>
     This page is never actually shown on the live docs since visiting the docs domain will redirect to the latest stable version.
     Select your desired version from the dropdown above or go straight to the
-    <a href="/{{ $.Site.Data.versions.stable_version }}">latest stable version</a>.
+    <a href="/influxdb/{{ $.Site.Data.products.influxdb.latest }}">latest stable version</a>.
   </p>
 </div>
 
diff --git a/layouts/partials/article/stable-version.html b/layouts/partials/article/stable-version.html
index 62fcd7fe1..a61582a06 100644
--- a/layouts/partials/article/stable-version.html
+++ b/layouts/partials/article/stable-version.html
@@ -1,18 +1,29 @@
-{{ $currentVersion := (index (findRE "[^/]+.*?" .RelPermalink) 0) .RelPermalink }}
-{{ $stableVersion := $.Site.Data.versions.stable_version }}
-{{ $stableVersionURL := replaceRE "[^/]+.*?[0]" $stableVersion .RelPermalink }}
+{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
+{{ $product := index $productPathData 0 }}
+{{ $productName := (index .Site.Data.products $product).name }}
+{{ $currentVersion := index $productPathData 1 }}
+
+{{ $stableVersion := (index .Site.Data.products $product).latest }}
+{{ $stableVersionURL := replaceRE `v[1-2]\.[0-9]{1,2}` $stableVersion .RelPermalink }}
+
 {{ if lt $currentVersion $stableVersion }}
   <div class="warn block old-version">
     <p>
-      This page documents an earlier version of InfluxDB. InfluxDB {{ $stableVersion }} is the latest stable version.<br/>
-      <a href="{{ $stableVersionURL }}">View this page in the {{ $stableVersion }} documentation</a>.
+      This page documents an earlier version of {{ $productName }}.
+      <a href="/{{ $product }}/{{$stableVersion}}/">{{ $productName }} {{ $stableVersion }}</a> is the latest stable version.<br/>
+      {{ if eq (findRE `v[1-2]` $currentVersion) (findRE `v[1-2]` $stableVersion) }}
+        <a href="{{ $stableVersionURL }}">View this page in the {{ $stableVersion }} documentation</a>.
+      {{ end }}
     </p>
   </div>
 {{ else if gt $currentVersion $stableVersion }}
   <div class="note block old-version">
     <p>
-      This page documents a pre-release version of InfluxDB. InfluxDB {{ $stableVersion }} is the latest stable version.<br/>
-      <a href="{{ $stableVersionURL }}">View this page in the {{ $stableVersion }} documentation</a>.
+      This page documents a <strong>pre-release</strong> version of {{ $productName }}.
+      <a href="/{{ $product }}/{{$stableVersion}}/">{{ $productName }} {{ $stableVersion }}</a> is the latest stable version.<br/>
+      {{ if eq (findRE `v[1-2]` $currentVersion) (findRE `v[1-2]` $stableVersion) }}
+        <a href="{{ $stableVersionURL }}">View this page in the {{ $stableVersion }} documentation</a>.
+      {{ end }}
     </p>
   </div>
 {{ end }}
diff --git a/layouts/partials/topnav.html b/layouts/partials/topnav.html
index 6996f79ee..d836c6275 100644
--- a/layouts/partials/topnav.html
+++ b/layouts/partials/topnav.html
@@ -1,17 +1,25 @@
+{{ $productPathData := findRE "[^/]+.*?" .RelPermalink }}
+{{ $product := index $productPathData 0 }}
+{{ $currentVersion := index $productPathData 1 }}
+
 <div class="topnav">
-  <div class="topnav--left">
+  <div class="topnav-left">
     <a class="influx-home" href="https://www.influxdata.com" title="InfluxData"><span class="icon-influx-logo"></span><span class="icon-influx-logotype"></span></a>
     <span class="divider"></span>
-    <a class="docs-home" href="/{{ $.Site.Data.versions.stable_version }}">InfluxDB Docs</a>
+    <a class="docs-home" href="/"><span class=short>Doc</span><span class="long">umentation</span></a>
   </div>
-  <div class="topnav--right">
-    <div class="selector-dropdowns">      
+  <div class="topnav-right">
+    <div class="selector-dropdowns">
       {{ partial "topnav/product-selector.html" . }}
       {{ partial "topnav/version-selector.html" . }}
     </div>
-    <button id="search-btn" onclick="toggle_sidebar('sidebar-open');document.getElementById('algolia-search-input').focus();return false;"><span class="icon-search"></span></button>
-    <button class="url-trigger" href="#"><span class="icon-ui-cog-thick"></span></button>
-    <button class="theme-switcher" id="theme-switch-light" onclick="switch_style('light-theme');return false;"><span class="icon-sun1"></span></button>
-    <button class="theme-switcher" id="theme-switch-dark" onclick="switch_style('dark-theme');return false;"><span class="icon-moon1"></span></button>
+    <div class="buttons">
+      <div class="search-btn">
+        <button id="search-btn" onclick="toggle_sidebar('sidebar-open');document.getElementById('algolia-search-input').focus();return false;"><span class="icon-search"></span></button>
+      </div>
+      <button class="url-trigger" href="#"><span class="icon-ui-cog-thick"></span></button>
+      <button class="theme-switcher" id="theme-switch-light" onclick="switch_style('light-theme');return false;"><span class="icon-sun1"></span></button>
+      <button class="theme-switcher" id="theme-switch-dark" onclick="switch_style('dark-theme');return false;"><span class="icon-moon1"></span></button>
+    </div>
   </div>
 </div>