Noissue - Fix broken layout from changeset 1940351cdb4c

static/css/main.css

 .m-a-na {
   margin: 0 0 !important; }
 
 .m-t-na {
   margin-top: 0 !important; }
 
 .m-b-na {
   margin-bottom: 0 !important; }
 
 .m-x-na {
@@ skipping 1448 matching lines @@
   width: 100%;
   height: 64px;
   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 {
   color: #161616;
   text-decoration: none;
   font-weight: 300; }
 
 .site-title a strong {
   font-weight: 400; }
 
 @media (min-width: 1200px) {
   html[dir="rtl"] .site-title {
     margin-right: 208px; }
   html[dir="ltr"] .site-title {
     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%; }
   #sidebar ul,
   #sidebar li {
@@ skipping 43 matching lines @@
     left: 0;
     text-align: right; }
   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,
   #sidebar .site-title {
     padding: 0 16px; }
@@ skipping 127 matching lines @@
       text-align: center;
       vertical-align: center;
       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; }
   #breadcrumbs a,
   #breadcrumbs a:hover,
@@ skipping 18 matching lines @@
     #breadcrumbs li + li {
       padding-left: 35px; }
     #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;
   color: #FFFFFF; }
   @media (max-width: 768px) {
@@ skipping 20 matching lines @@
     height: 0;
     content: " ";
     border-top: 2px solid #FFFFFF; }
   #footer a {
     color: #FFFFFF; }
   #footer a:hover {
     text-decoration: underline;
     color: #8CC63E !important; }
   #footer p {
     color: #E1E1E1; }