fixing breadcrumb position on mobile

wagtail/wagtailadmin/static/wagtailadmin/scss/components/header.scss

@@ -66,7 +66,7 @@ header{
 
     /* necessary on mobile only to make way for hamburger menu */
     &.nice-padding{
-        padding-left:4em;
+        padding-left:$desktop-nice-padding;
     }
 
     label{

wagtail/wagtailadmin/static/wagtailadmin/scss/core.scss

@@ -430,13 +430,13 @@ footer{
 .breadcrumb{
     @include unlist();
 }
+
 .breadcrumb{
     @include clearfix();
     overflow:hidden;
-    background:$color-teal-darker;
+    padding-top:1.4em;
     font-size:0.85em;
 
-
     li {
         display: block;
         float: left;
@@ -468,7 +468,7 @@ footer{
                 content:"n";
                 padding-left:20px;
                 font-size:2em;
-                color:$color-teal;
+                color:$color-teal-darker;
                 line-height:0.9em;
             }
         }
@@ -739,6 +739,19 @@ footer, .logo{
         margin-left:50px;
     }
 
+    .breadcrumb{
+        padding-top:0;
+        background:$color-teal-darker;
+
+        li {
+            a, span{
+                &:after{
+                    color:$color-teal;
+                }
+            }
+        }
+    }
+
     /* Z-indexes */
     .nav-main{
         li{

wagtail/wagtailadmin/static/wagtailadmin/scss/layouts/page-editor.scss

@@ -6,11 +6,8 @@
     margin-bottom:10em;
 }
 
-.page-editor header {
-
-}
 .page-editor .breadcrumb{
-    margin-top:-1.8em;
+    margin-top:-1.2em;
     margin-bottom:2em;
 }
 .page-editor .modal .breadcrumb{
@@ -336,6 +333,9 @@ footer .preview{
 }
 
 @media screen and (min-width: $breakpoint-mobile){
+    .page-editor .breadcrumb{
+        margin-top:-1.8em;
+    }
     .object{
         fieldset{
             max-width:1024px;