Noissue - Fix broken layout from changeset 1940351cdb4c

static/scss/layout/_sidebar.scss

Index: static/scss/layout/_sidebar.scss
===================================================================
--- a/static/scss/layout/_sidebar.scss
+++ b/static/scss/layout/_sidebar.scss
@@ -125,49 +125,62 @@
     right: 0;
     text-align: left;
   }
 }
 
 // Positioning the sidebar on tablet/mobile
 @media(max-width: $sidebar-breakpoint-x - 1)
 {
-  #sidebar
-  {
-    margin-top: -64px;
-  }
   // sidebar appears below content by default on mobile (like a footer)
   // when javascript is enabled, fix the sidebar (navbar with toggle menu) top
+
+ #sidebar
+ {
+   margin-top: -$mobile-sidebar-height;
+ }
+
   .js #sidebar
   {
-    position: fixed;
-    margin-top: 0;
     z-index: 1;
     top: 0;
     left: 0;
+    margin-top: 0;
     overflow: hidden;
     width: 100%;
     // when closed, show the top of the sidebar (just the navbar)
     height: $lg;
   }
 
+  html:not(.open-sidebar).mobile #sidebar
+  {
+    position: fixed;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  html:not(.open-sidebar).mobile.scrollDown #sidebar
+  {
+    transform: translate(0,-$header-height);
+  }
+
   #sidebar-menus
   {
     margin-top: 30px;
   }
 
   .js #sidebar-menus
   {
     margin-top: 0;
   }
 
   // when opened, show the rest
-  .js #sidebar.open
+  .js.open-sidebar #sidebar
   {
     height: 100%;
+    position: fixed;
   }
 
   // align text opposite of desktop on mobile ltr and rtl
 
   html[dir="ltr"].js #sidebar
   {
     text-align: left;
   }
@@ -179,36 +192,36 @@
 
   .js #sidebar
   {
     // show sidebar navbar title and open button by default
     #sidebar-open
     {
       display: block;
     }
+  }
 
-    // Toggle open/close buttons
-    &.open
-    {
-     #sidebar-open
-     {
-      display: none;
-     }
-     #sidebar-close
-     {
-      display: block;
-     }
-   }
- }
+   // Toggle open/close buttons
+  .js.open-sidebar #sidebar
+  {
+      #sidebar-open
+      {
+        display: none;
+      }
+      #sidebar-close
+      {
+        display: block;
+      }
+  }
 
   #sidebar
   {
     .site-title
     {
-        display: block;
+      display: block;
     }
 
     #sidebar-brand
     {
       background-color: $inverted-fg;
     }
 
     #sidebar-open,