Merge pull request #215 from agjohnson/fix-nav-scrollbar

Resolve scrollbar visibility on navbar on long content

sass/_theme_layout.sass

@@ -24,6 +24,7 @@
     padding: 0 $base-font-size
 
 .wy-menu-vertical
+  width: $nav-desktop-width
   header, p.caption
     height: $base-font-size * 2
     display: inline-block
@@ -164,6 +165,10 @@
         color: $menu-link-active
 
 .wy-side-nav-search
+  display: block
+  width: $nav-desktop-width
+  padding: $gutter / 2
+  margin-bottom: $gutter / 2
   z-index: $z-index-popover
   background-color: $nav-search-background-color
   text-align: center
@@ -259,11 +264,18 @@
   padding-bottom: 2em
   width: $nav-desktop-width
   overflow-x: hidden
-  overflow-y: scroll
+  overflow-y: hidden
   min-height: 100%
   background: $nav-background-color
   z-index: $z-index-popover
 
+.wy-side-scroll
+  width: $nav-desktop-width + 20px
+  position: relative
+  overflow-x: hidden
+  overflow-y: scroll
+  height: 100%
+
 .wy-nav-top
   display: none
   background: $link-color
@@ -355,6 +367,12 @@ footer
     &.shift
       width: 85%
       left: 0
+  .wy-side-scroll
+    width: auto
+  .wy-side-nav-search
+    width: auto
+  .wy-menu.wy-menu-vertical
+    width: auto
   .wy-nav-content-wrap
     margin-left: 0
     .wy-nav-content

sphinx_rtd_theme/layout.html

@@ -85,6 +85,7 @@
 
     {# SIDE NAV, TOGGLES ON MOBILE #}
     <nav data-toggle="wy-nav-shift" class="wy-nav-side">
+      <div class="wy-side-scroll">
         <div class="wy-side-nav-search">
           {% block sidebartitle %}
 
@@ -128,7 +129,7 @@
             {% endif %}
           {% endblock %}
         </div>
-      &nbsp;
+      </div>
     </nav>
 
     <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

sphinx_rtd_theme/static/js/theme.js

@@ -75,7 +75,7 @@ window.SphinxRtdTheme = (function (jquery) {
                 resize();
             },
             init = function () {
-                navBar = jquery('nav.wy-nav-side:first');
+                navBar = jquery('div.wy-side-scroll:first');
                 win = jquery(window);
             },
             reset = function () {