diff --git a/doc/_themes/odoodoc/layout.html b/doc/_themes/odoodoc/layout.html
index e8c1c85ce16..00a63702165 100644
--- a/doc/_themes/odoodoc/layout.html
+++ b/doc/_themes/odoodoc/layout.html
@@ -25,8 +25,8 @@
 {%- block document -%}
   <div class="sphinxsidebar">
     <div class="sphinxsidebarwrapper">
-      {# bootstrapify nav #}
-      {{ toc|replace("<ul>", '<ul class="nav">') }}
+      {{ toctree(maxdepth=4, collapse=False, includehidden=True,
+                 main_navbar=False, titles_only=False) }}
     </div>
   </div>
   {{ super() }}
diff --git a/doc/_themes/odoodoc/sphinx_monkeypatch.py b/doc/_themes/odoodoc/sphinx_monkeypatch.py
index 60b8b115b66..13c3a305988 100644
--- a/doc/_themes/odoodoc/sphinx_monkeypatch.py
+++ b/doc/_themes/odoodoc/sphinx_monkeypatch.py
@@ -17,8 +17,7 @@ def patch():
         if toc is None:
             return None
 
-        if main_navbar:
-            navbarify(toc[0])
+        navbarify(toc[0], main_navbar=main_navbar)
         return toc
 
     @monkey(StandaloneHTMLBuilder)
@@ -26,7 +25,10 @@ def patch():
         """ _get_local_toctree generates a documentation toctree for the local
         document (?), called from handle_page
         """
-        return old_local(self, *args, main_navbar=True, **kwargs)
+        # so can call toctree(main_navbar=False)
+        d = {'main_navbar': True}
+        d.update(kwargs)
+        return old_local(self, *args, **d)
 
     # monkeypatch visit_table to remove border and add .table
     HTMLTranslator.visit_table = visit_table
@@ -35,25 +37,33 @@ def patch():
     # copy data- attributes straight from source to dest
     HTMLTranslator.starttag = starttag_data
 
-def navbarify(node):
+def navbarify(node, main_navbar=False):
     # add classes to toplevel
-    node['classes'].extend(['nav', 'navbar-nav', 'navbar-right'])
-    for list_item in node.children:
-        # bullet_list
-        #     list_item
-        #         compact_paragraph
-        #             reference
-        #         bullet_list
-        #             list_item
-        #                 compact_paragraph
-        #                     reference
-        list_item['classes'].append('dropdown')
-        # list_item.compact_paragraph.reference
-        link = list_item.children[0].children[0]
-        link['classes'].append('dropdown-toggle')
-        link.attributes['data-toggle'] = 'dropdown'
-        # list_item.bullet_list
-        list_item.children[1]['classes'].append('dropdown-menu')
+    if not main_navbar:
+        navify([node])
+    else:
+        node['classes'].extend(['nav', 'navbar-nav', 'navbar-right'])
+        for list_item in node.children:
+            # bullet_list
+            #     list_item
+            #         compact_paragraph
+            #             reference
+            #         bullet_list
+            #             list_item
+            #                 compact_paragraph
+            #                     reference
+            list_item['classes'].append('dropdown')
+            # list_item.compact_paragraph.reference
+            link = list_item.children[0].children[0]
+            link['classes'].append('dropdown-toggle')
+            link.attributes['data-toggle'] = 'dropdown'
+            # list_item.bullet_list
+            list_item.children[1]['classes'].append('dropdown-menu')
+def navify(nodes):
+    for node in nodes:
+        if node.tagname == 'bullet_list':
+            node['classes'].append('nav')
+        navify(node.children)
 
 def visit_table(self, node):
     """
diff --git a/doc/_themes/odoodoc/static/style.css b/doc/_themes/odoodoc/static/style.css
index 0653b6eb348..e39beade981 100644
--- a/doc/_themes/odoodoc/static/style.css
+++ b/doc/_themes/odoodoc/static/style.css
@@ -6238,30 +6238,6 @@ body {
     width: 25%;
   }
 }
-.sphinxsidebarwrapper {
-  width: 100%;
-}
-@media (max-width: 767px) {
-  .sphinxsidebarwrapper {
-    display: none !important;
-  }
-}
-@media (min-width: 768px) and (max-width: 991px) {
-  .sphinxsidebarwrapper {
-    display: none !important;
-  }
-}
-@media print {
-  .sphinxsidebarwrapper {
-    display: none !important;
-  }
-}
-.sphinxsidebarwrapper > .nav > li > a {
-  display: none !important;
-}
-.sphinxsidebarwrapper > .nav .nav .nav .nav {
-  display: none !important;
-}
 .btn-outline {
   color: #a24689;
   background-color: transparent;
@@ -6362,17 +6338,59 @@ body {
     padding-left: 20px;
   }
 }
-/* First level of nav */
+/* Side navigation visibility changes */
+.sphinxsidebarwrapper > .nav .nav {
+  display: none;
+}
+.sphinxsidebarwrapper > .nav li.active > .nav,
+.sphinxsidebarwrapper > .nav li.current > .nav {
+  display: block;
+}
+/* Side navigation graphical styling */
+.sphinxsidebarwrapper {
+  width: 100%;
+  /* First level of nav */
+  /* All levels of nav */
+}
+@media (max-width: 767px) {
+  .sphinxsidebarwrapper {
+    display: none !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .sphinxsidebarwrapper {
+    display: none !important;
+  }
+}
+@media print {
+  .sphinxsidebarwrapper {
+    display: none !important;
+  }
+}
 .sphinxsidebarwrapper > .nav {
   margin-top: 20px;
   margin-bottom: 20px;
 }
-/* All levels of nav */
+.sphinxsidebarwrapper .nav > li > a {
+  font-size: 13px;
+  font-weight: bold;
+  padding-left: 20px;
+}
+.sphinxsidebarwrapper .nav .nav > li > a {
+  font-size: 12px;
+  padding-left: 25px;
+}
+.sphinxsidebarwrapper .nav .nav .nav > li > a {
+  font-weight: normal;
+  padding-left: 30px;
+}
+.sphinxsidebarwrapper .nav .nav .nav .nav > li > a {
+  font-size: 11px;
+  padding-left: 35px;
+}
 .sphinxsidebarwrapper .nav > li > a {
   display: block;
   padding: 4px 20px;
-  font-size: 13px;
-  font-weight: 500;
   color: #999;
 }
 .sphinxsidebarwrapper .nav > li > a:hover,
@@ -6383,6 +6401,9 @@ body {
   background-color: transparent;
   border-left: 1px solid #a24689;
 }
+.sphinxsidebarwrapper .nav > .current > a,
+.sphinxsidebarwrapper .nav > .current:hover > a,
+.sphinxsidebarwrapper .nav > .current:focus > a,
 .sphinxsidebarwrapper .nav > .active > a,
 .sphinxsidebarwrapper .nav > .active:hover > a,
 .sphinxsidebarwrapper .nav > .active:focus > a {
@@ -6392,18 +6413,24 @@ body {
   background-color: transparent;
   border-left: 2px solid #a24689;
 }
-/* Nav: second level (shown on .active) */
+.sphinxsidebarwrapper .nav .nav > li > a:hover,
+.sphinxsidebarwrapper .nav .nav > li > a:focus {
+  padding-left: 24px;
+}
+.sphinxsidebarwrapper .nav .nav > .current > a,
+.sphinxsidebarwrapper .nav .nav > .current:hover > a,
+.sphinxsidebarwrapper .nav .nav > .current:focus > a,
+.sphinxsidebarwrapper .nav .nav > .active > a,
+.sphinxsidebarwrapper .nav .nav > .active:hover > a,
+.sphinxsidebarwrapper .nav .nav > .active:focus > a {
+  padding-left: 23px;
+}
 .sphinxsidebarwrapper .nav .nav .nav {
-  display: none;
-  /* Hide by default, but at >768px, show it */
   padding-bottom: 10px;
 }
 .sphinxsidebarwrapper .nav .nav .nav > li > a {
   padding-top: 1px;
   padding-bottom: 1px;
-  padding-left: 30px;
-  font-size: 12px;
-  font-weight: normal;
 }
 .sphinxsidebarwrapper .nav .nav .nav > li > a:hover,
 .sphinxsidebarwrapper .nav .nav .nav > li > a:focus {
@@ -6413,7 +6440,16 @@ body {
 .sphinxsidebarwrapper .nav .nav .nav > .active:hover > a,
 .sphinxsidebarwrapper .nav .nav .nav > .active:focus > a {
   padding-left: 28px;
-  font-weight: 500;
+  font-weight: bold;
+}
+.sphinxsidebarwrapper .nav .nav .nav .nav > li > a:hover,
+.sphinxsidebarwrapper .nav .nav .nav .nav > li > a:focus {
+  padding-left: 34px;
+}
+.sphinxsidebarwrapper .nav .nav .nav .nav > .active > a,
+.sphinxsidebarwrapper .nav .nav .nav .nav > .active:hover > a,
+.sphinxsidebarwrapper .nav .nav .nav .nav > .active:focus > a {
+  padding-left: 33px;
 }
 /* Show and affix the side nav when space allows it */
 @media (min-width: 992px) {
diff --git a/doc/_themes/odoodoc/static/style.less b/doc/_themes/odoodoc/static/style.less
index 85c0cc5fc79..b224a1a56c9 100644
--- a/doc/_themes/odoodoc/static/style.less
+++ b/doc/_themes/odoodoc/static/style.less
@@ -36,23 +36,6 @@ body {
   .make-md-column(3);
 }
 
-.sphinxsidebarwrapper {
-  width: 100%;
-
-  .hidden-xs();
-  .hidden-sm();
-  .hidden-print();
-
-  // hide level 0 (root title)
-  > .nav  > li > a {
-    display: none !important;
-  }
-  // hide levels 3+
-  > .nav .nav .nav .nav {
-    display: none !important;
-  }
-}
-
 .btn-outline {
   color: @brand-primary;
   background-color: transparent;
@@ -158,59 +141,119 @@ body {
   }
 }
 
-/* First level of nav */
-.sphinxsidebarwrapper > .nav {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
+/* Side navigation visibility changes */
+.sphinxsidebarwrapper {
+  > .nav { // root (contains document categories), always show
+    .nav {
+      // hide sub-everything by default
+      display: none;
+    }
 
-/* All levels of nav */
-.sphinxsidebarwrapper .nav {
-  > li > a {
-    display: block;
-    padding: 4px 20px;
-    font-size: 13px;
-    font-weight: 500;
-    color: #999;
-
-    &:hover, &:focus {
-      padding-left: 19px;
-      color: @brand-primary;
-      text-decoration: none;
-      background-color: transparent;
-      border-left: 1px solid @brand-primary;
+    li.active > .nav,
+    li.current > .nav {
+      // sub-items of a current or active li are shown
+      display: block;
     }
   }
-
-  > .active > a, > .active:hover > a, > .active:focus > a {
-    padding-left: 18px;
-    font-weight: bold;
-    color: @brand-primary;
-    background-color: transparent;
-    border-left: 2px solid @brand-primary;
-  }
 }
 
-/* Nav: second level (shown on .active) */
-.sphinxsidebarwrapper .nav .nav .nav {
-  display: none; /* Hide by default, but at >768px, show it */
-  padding-bottom: 10px;
+/* Side navigation graphical styling */
+@nav-spacing: 20px;
+@nav-spacing-increment: 5px;
+@nav-hover-offset: 1px;
+@nav-hover: @nav-spacing - @nav-hover-offset;
+@nav-current-offset: 2px;
+@nav-current: @nav-spacing - @nav-current-offset;
 
-  > li > a {
-    padding-top: 1px;
-    padding-bottom: 1px;
-    padding-left: 30px;
+.sphinxsidebarwrapper {
+  width: 100%;
+
+  .hidden-xs();
+  .hidden-sm();
+  .hidden-print();
+
+  /* First level of nav */
+  > .nav {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  .nav > li > a {
+    font-size: 13px;
+    font-weight: bold;
+    padding-left: @nav-spacing;
+  }
+  .nav .nav > li > a {
     font-size: 12px;
+    padding-left: @nav-spacing + @nav-spacing-increment;
+  }
+  .nav .nav .nav > li > a {
     font-weight: normal;
+    padding-left: @nav-spacing + 2*@nav-spacing-increment;
+  }
+  .nav .nav .nav .nav > li > a {
+    font-size: 11px;
+    padding-left: @nav-spacing + 3*@nav-spacing-increment;
   }
 
-  > li > a:hover, > li > a:focus {
-    padding-left: 29px;
-  }
+  /* All levels of nav */
+  .nav {
+    > li > a {
+      display: block;
+      padding: 4px @nav-spacing;
+      color: #999;
 
-  > .active > a, > .active:hover > a, > .active:focus > a {
-    padding-left: 28px;
-    font-weight: 500;
+      &:hover, &:focus {
+        padding-left: @nav-hover;
+        color: @brand-primary;
+        text-decoration: none;
+        background-color: transparent;
+        border-left: @nav-hover-offset solid @brand-primary;
+      }
+    }
+
+    // before scrollspy is applied, need to use current for docs
+    > .current > a, > .current:hover > a, > .current:focus > a,
+    > .active > a, > .active:hover > a, > .active:focus > a {
+      padding-left: @nav-current;
+      font-weight: bold;
+      color: @brand-primary;
+      background-color: transparent;
+      border-left: @nav-current-offset solid @brand-primary;
+    }
+  }
+  .nav .nav {
+    > li > a:hover, > li > a:focus {
+      padding-left: @nav-hover + @nav-spacing-increment;
+    }
+    > .current > a, > .current:hover > a, > .current:focus > a,
+    > .active > a, > .active:hover > a, > .active:focus > a {
+      padding-left: @nav-current + @nav-spacing-increment;
+    }
+  }
+  .nav .nav .nav {
+    padding-bottom: 10px;
+
+    > li > a {
+      padding-top: 1px;
+      padding-bottom: 1px;
+    }
+
+    > li > a:hover, > li > a:focus {
+      padding-left: @nav-hover + 2 * @nav-spacing-increment;
+    }
+    > .active > a, > .active:hover > a, > .active:focus > a {
+      padding-left: @nav-current + 2 * @nav-spacing-increment;
+      font-weight: bold;
+    }
+  }
+  .nav .nav .nav .nav {
+    > li > a:hover, > li > a:focus {
+      padding-left: @nav-hover + 3 * @nav-spacing-increment;
+    }
+    > .active > a, > .active:hover > a, > .active:focus > a {
+      padding-left: @nav-current + 3 * @nav-spacing-increment;
+    }
   }
 }
 
diff --git a/doc/index.rst b/doc/index.rst
index 97829b0a79e..5440162574a 100644
--- a/doc/index.rst
+++ b/doc/index.rst
@@ -4,8 +4,12 @@ odoo developer documentation
 
 .. TODO: replace or style
 
+.. hidden toctree w/o titlesonly otherwise the titlesonly "sticks" to
+   in-document toctrees and we can't have a toctree showing both "sibling"
+   pages and current document sections
+
 .. toctree::
-    :titlesonly:
+    :hidden:
 
     tutorials
     guides