Noissue - Fix broken layout from changeset 1940351cdb4c

static/scss/layout/_breadcrumbs.scss

 // This file is part of acceptableads.org.
 // Copyright (C) 2016-present eyeo GmbH
 //
 // acceptableads.org is free software: you can redistribute it and/or modify
 // it under the terms of the GNU General Public License as published by
 // the Free Software Foundation, either version 3 of the License, or
 // (at your option) any later version.
 //
 // acceptableads.org is distributed in the hope that it will be useful,
 // but WITHOUT ANY WARRANTY; without even the implied warranty of
 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 // GNU General Public License for more details.
 //
 // You should have received a copy of the GNU General Public License
 // along with acceptableads.org.  If not, see <http://www.gnu.org/licenses/>.
 
 #breadcrumbs
 {
   position: absolute;
-  z-index: 1;
   top: $lg;
   left: 0;
   width: 100%;
   text-transform: uppercase;
   color: $secondary-fg;
   background-color: $secondary-bg;
   font-size: $font-size-xs;
   font-weight: 400;
 
   a,
@@ skipping 45 matching lines @@
       width: $md;
       content: ">";
       color: $secondary-fg;
       font-weight: 300;
     }
   }
 }
 
 .js #breadcrumbs
 {
-  position: fixed;
+  z-index: 1;
 }
 
 @media(max-width: $sidebar-breakpoint-x - 1)
 {
   #breadcrumbs ol
   {
     padding: 0 $sm;
   }
+
+  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,-$header-height);
+  }
 }
 
 // Fix breadcrumbs on desktops
 @media(min-width: $sidebar-breakpoint-x)
 {
   html[dir="ltr"] #breadcrumbs
   {
-    margin-left: $sidebar-width;
+    padding-left: $sidebar-width;
   }
 
   html[dir="rtl"] #breadcrumbs
   {
-    margin-right: $sidebar-width;
+    padding-right: $sidebar-width;
   }
 }