diff --git a/doc/_themes/odoodoc/layout.html b/doc/_themes/odoodoc/layout.html
index 69f7dbff2e9..3e75dadac89 100644
--- a/doc/_themes/odoodoc/layout.html
+++ b/doc/_themes/odoodoc/layout.html
@@ -33,16 +33,6 @@
     <div class="sphinxsidebarwrapper">
       {{ toctree(maxdepth=4, collapse=False, includehidden=True,
                  main_navbar=False, titles_only=False) }}
-      {% if versions %}
-        <div class="versions">
-          Documentation version: {{ version }}
-          <ul>
-            {% for name, url in versions %}
-              <li><a href="{{ url }}">{{ name }}</a></li>
-            {% endfor %}
-          </ul>
-        </div>
-      {% endif %}
       {% if github_link %}
         <p><a href="{{ github_link() }}" class="github">
           Edit on GitHub
@@ -68,6 +58,18 @@
       <a href="http://odoo.com" class="o_logo navbar-brand">
         <span class="o_logo_main">odoo</span><span class="o_logo_app">doc</span>
       </a>
+      {% if versions %}
+        <div class="versions navbar-brand">
+          <a class="dropdown-toggle" data-toggle="dropdown">
+            {{ version }} <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu" role="menu">
+            {% for name, url in versions %}
+              <li><a href="{{ url }}">{{ name }}</a></li>
+            {% endfor %}
+          </ul>
+        </div>
+      {% endif %}
     </div>
     <nav class="collapse navbar-collapse navbar-main" role="navigation">
       {{ toctree(titles_only=True, maxdepth=2, includehidden=True, collapse=False) }}
diff --git a/doc/_themes/odoodoc/static/style.css b/doc/_themes/odoodoc/static/style.css
index 20f02aca70d..9fb81c99d74 100644
--- a/doc/_themes/odoodoc/static/style.css
+++ b/doc/_themes/odoodoc/static/style.css
@@ -6266,6 +6266,9 @@ body {
 /*
  * Main navigation
  */
+.docs-nav {
+  /* version switcher */
+}
 .docs-nav .navbar-brand,
 .docs-nav .navbar-nav > li > a {
   position: relative;
@@ -6304,6 +6307,22 @@ body {
   background-color: #a24689;
   color: white;
 }
+.docs-nav div.versions {
+  position: relative;
+  cursor: pointer;
+  font-size: 300%;
+  display: inline-block;
+}
+.docs-nav div.versions > a {
+  font-size: 40%;
+  margin: 0.2em;
+  color: #999;
+  font-family: Lato, Arial, sans-serif;
+}
+.docs-nav div.versions > a:hover,
+.docs-nav div.versions > a:focus {
+  text-decoration: none;
+}
 .o_logo {
   display: inline-block;
   font-size: 300%;
@@ -6455,50 +6474,6 @@ body {
 .sphinxsidebarwrapper .nav .nav .nav .nav > .active:focus > a {
   padding-left: 33px;
 }
-/* version switcher */
-.sphinxsidebarwrapper div.versions {
-  padding: 5px 10px 10px;
-  position: relative;
-  display: inline-block;
-  color: #777777;
-  cursor: pointer;
-}
-.sphinxsidebarwrapper div.versions:after {
-  font-family: "Glyphicons Halflings";
-  content: "\e072";
-  font-size: 80%;
-  padding-left: 3px;
-}
-.sphinxsidebarwrapper div.versions ul {
-  display: none;
-  list-style: none;
-  padding: 0;
-  margin: 0 0 0 -5px;
-  white-space: nowrap;
-  background-color: rgba(255, 255, 255, 0.9);
-  position: absolute;
-  top: 0;
-  left: 100%;
-}
-.sphinxsidebarwrapper div.versions ul > li {
-  display: inline-block;
-  margin-left: -1px;
-}
-.sphinxsidebarwrapper div.versions ul > li:first {
-  margin-left: 0;
-}
-.sphinxsidebarwrapper div.versions ul > li a {
-  color: #777777;
-  display: inline-block;
-  padding: 5px;
-}
-.sphinxsidebarwrapper div.versions ul > li a:hover {
-  text-decoration: none;
-  background-color: rgba(85, 85, 85, 0.07);
-}
-.sphinxsidebarwrapper div.versions:hover ul {
-  display: block;
-}
 /* github link for current document */
 .sphinxsidebarwrapper > p {
   margin: 5px 10px 10px;
diff --git a/doc/_themes/odoodoc/static/style.less b/doc/_themes/odoodoc/static/style.less
index ae7333b61f8..e5c0030b1eb 100644
--- a/doc/_themes/odoodoc/static/style.less
+++ b/doc/_themes/odoodoc/static/style.less
@@ -101,6 +101,23 @@ body {
       color: white;
     }
   }
+  /* version switcher */
+  div.versions {
+    position: relative;
+    cursor: pointer;
+    font-size: 300%;
+    display: inline-block;
+
+    > a {
+      font-size: 40%;
+      margin: 0.2em;
+      color: #999;
+      font-family: Lato, Arial, sans-serif;
+      &:hover, &:focus {
+        text-decoration: none;
+      }
+    }
+  }
 }
 
 // FIXME: protocol-relative urls for remote but absolute for local (file://)?
@@ -260,54 +277,6 @@ body {
     }
   }
 }
-/* version switcher */
-.sphinxsidebarwrapper div.versions {
-  // use padding to set up a big hover target
-  padding: 5px 10px 10px;
-
-  position: relative;
-  display: inline-block;
-  color: @gray-light;
-  cursor: pointer;
-  // "▶" to the right of the current version's name
-  &:after {
-    font-family: "Glyphicons Halflings";
-    content: "\e072";
-    font-size: 80%;
-    // space out a bit from the version name
-    padding-left: 3px;
-  }
-
-  ul {
-    display: none;
-    list-style: none;
-    padding: 0;
-    margin: 0 0 0 -5px;
-    white-space: nowrap;
-    background-color: fade(@body-bg, 90%);
-
-    position: absolute;
-    top: 0;
-    left: 100%;
-    > li {
-      display: inline-block;
-      margin-left: -1px;
-      &:first { margin-left: 0;}
-      a {
-        color: @gray-light;
-        display: inline-block;
-        padding: 5px;
-        &:hover {
-          text-decoration: none;
-          background-color: fade(@gray, 7%);
-        }
-      }
-    }
-  }
-  &:hover ul {
-    display: block;
-  }
-}
 /* github link for current document */
 .sphinxsidebarwrapper > p {
   margin: 5px 10px 10px;