Noissue - Fix broken layout from changeset 1940351cdb4c

static/css/main.css

Index: static/css/main.css
===================================================================
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1461,20 +1461,19 @@
   padding: 0 32px;
   background-color: #FFFFFF;
   line-height: 64px; }
   #navbar img {
     height: 16px;
     margin: 0; }
 
 .js #navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1; }
+  position: absolute;
+  z-index: 1;
+  top: 0; }
 
 .site-title {
   margin: 0;
   font-size: 17px;
   line-height: 64px;
   word-spacing: -2px; }
 
 .site-title a {
@@ -1492,17 +1491,25 @@
     margin-left: 208px; } }
 
 @media (max-width: 1199px) {
   #navbar {
     margin-left: 60px; }
   .js #navbar {
     z-index: 2;
     padding: 0;
-    margin-left: 150px; } }
+    margin-left: 150px;
+    width: auto; }
+  html[dir="rtl"].js #navbar {
+    margin-right: 150px; }
+  html:not(.open-sidebar).mobile #navbar {
+    position: fixed;
+    transition: transform 0.2s ease-in-out; }
+  html:not(.open-sidebar).mobile.scrollDown #navbar {
+    transform: translate(0, -96px); } }
 
 #sidebar {
   text-transform: uppercase;
   color: #FFFFFF;
   background-color: #161616;
   font-size: 16px;
   font-weight: 400;
   line-height: 100%; }
@@ -1556,39 +1563,44 @@
   html[dir="rtl"] #sidebar {
     right: 0;
     text-align: left; } }
 
 @media (max-width: 1199px) {
   #sidebar {
     margin-top: -64px; }
   .js #sidebar {
-    position: fixed;
-    margin-top: 0;
     z-index: 1;
     top: 0;
     left: 0;
+    margin-top: 0;
     overflow: hidden;
     width: 100%;
     height: 64px; }
+  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, -96px); }
   #sidebar-menus {
     margin-top: 30px; }
   .js #sidebar-menus {
     margin-top: 0; }
-  .js #sidebar.open {
-    height: 100%; }
+  .js.open-sidebar #sidebar {
+    height: 100%;
+    position: fixed; }
   html[dir="ltr"].js #sidebar {
     text-align: left; }
   html[dir="rtl"].js #sidebar {
     text-align: right; }
   .js #sidebar #sidebar-open {
     display: block; }
-  .js #sidebar.open #sidebar-open {
+  .js.open-sidebar #sidebar #sidebar-open {
     display: none; }
-  .js #sidebar.open #sidebar-close {
+  .js.open-sidebar #sidebar #sidebar-close {
     display: block; }
   #sidebar .site-title {
     display: block; }
   #sidebar #sidebar-brand {
     background-color: #FFFFFF; }
   #sidebar #sidebar-open,
   #sidebar #sidebar-close,
   #sidebar #sidebar-logo,
@@ -1726,17 +1738,16 @@
       border-left: 1px solid #161616; }
   .js #secondary-navigation {
     display: none; }
   .js #sidebar.open #secondary-navigation {
     display: block; } }
 
 #breadcrumbs {
   position: absolute;
-  z-index: 1;
   top: 64px;
   left: 0;
   width: 100%;
   text-transform: uppercase;
   color: #FFFFFF;
   background-color: #292929;
   font-size: 12px;
   font-weight: 400; }
@@ -1765,44 +1776,56 @@
     #breadcrumbs li + li::before {
       display: inline-block;
       width: 32px;
       content: ">";
       color: #FFFFFF;
       font-weight: 300; }
 
 .js #breadcrumbs {
-  position: fixed; }
+  z-index: 1; }
 
 @media (max-width: 1199px) {
   #breadcrumbs ol {
-    padding: 0 16px; } }
+    padding: 0 16px; }
+  html:not(.open-sidebar).mobile #breadcrumbs {
+    position: fixed;
+    transition: transform 0.2s ease-in-out; }
+  html:not(.open-sidebar).mobile.scrollDown #breadcrumbs {
+    transform: translate(0, -96px); } }
 
 @media (min-width: 1200px) {
   html[dir="ltr"] #breadcrumbs {
-    margin-left: 208px; }
+    padding-left: 208px; }
   html[dir="rtl"] #breadcrumbs {
-    margin-right: 208px; } }
+    padding-right: 208px; } }
 
-.js .outer {
-  position: absolute;
-  top: 96px;
-  margin-top: 0;
+.outer {
   bottom: 0px;
   height: auto;
   width: 100%;
-  overflow: auto; }
+  overflow: auto;
+  margin-top: 32px; }
+
+.js .outer {
+  margin-top: 96px; }
+
+@media (max-width: 1199px) {
+  .outer {
+    margin-top: auto; }
+  html:not(.open-sidebar).mobile .outer {
+    position: static; }
+  html:not(.open-sidebar).mobile.scrollDown .outer {
+    margin-top: 32px; }
+  .mobile.open-sidebar .outer {
+    position: absolute; } }
 
 @media (min-width: 1200px) {
   html[dir="ltr"] .outer {
     padding-left: 208px; }
-  .outer {
-    margin-top: 32px; }
-  .js .outer {
-    margin-top: 0px; }
   html[dir="rtl"] .outer {
     padding-right: 208px; } }
 
 #footer {
   padding-top: 64px;
   padding-bottom: 96px;
   font-size: 14px;
   background-color: #292929;