Non-obstructive navbar toggle icon

Changes the design of the navbar toggle slightly so that it no longer obstructs page headers.
Currently: https://cdn.pbrd.co/images/GAruhHC.png, https://cdn.pbrd.co/images/GArxXtn.png
With fix: https://cdn.pbrd.co/images/GArvF7ec.png, https://cdn.pbrd.co/images/GArwp3o.png

CHANGELOG.txt

@@ -25,6 +25,7 @@ Changelog
  * Fix: Removed deprecated jQuery ``load`` call from TableBlock initialisation (Jack Paine)
  * Fix: Position of options in mobile nav-menu (Jack Paine)
  * Fix: Center page editor footer regardless of screen width (Jack Paine)
+ * Fix: Change the design of the navbar toggle icon so that it no longer obstructs page headers (Jack Paine)
 
 
 1.11.1 (07.07.2017)

docs/releases/1.12.rst

@@ -49,6 +49,7 @@ Bug fixes
  * Removed deprecated jQuery ``load`` call from TableBlock initialisation (Jack Paine)
  * Position of options in mobile nav-menu (Jack Paine)
  * Center page editor footer regardless of screen width (Jack Paine)
+ * Change the design of the navbar toggle icon so that it no longer obstructs page headers (Jack Paine)
 
 Upgrade considerations
 ======================

wagtail/wagtailadmin/static_src/wagtailadmin/scss/_variables.scss

@@ -81,3 +81,4 @@ $font-serif: Roboto Slab, Georgia, serif;
 $thumbnail-width: 130px;
 $menu-width: 180px;
 $menu-width-max: 320px;
+$mobile-nav-indent: 50px;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_formatters.scss

@@ -37,6 +37,10 @@
             border-radius: 0;
         }
     }
+
+    @media screen and (max-width: $breakpoint-mobile) {
+        left: $mobile-nav-indent;
+    }
 }
 
 .media-placeholder {
@@ -45,7 +49,7 @@
     background-color: #ccc;
     padding: 5px;
 
-    h3, 
+    h3,
     p {
         margin: 0;
     }
@@ -123,7 +127,7 @@ form.status-tag:hover {
 }
 
 .privacy-indicator {
-    .label-private, 
+    .label-private,
     .label-public {
         &:before {
             font-size: 1.5em;
@@ -132,7 +136,7 @@ form.status-tag:hover {
     }
 
     &.public {
-        .label-private { 
+        .label-private {
             display: none;
         }
     }
@@ -187,7 +191,7 @@ a.tag:hover {
     &.loading {
         position: relative;
 
-        &:before, 
+        &:before,
         &:after {
             position: absolute;
             display: block;
@@ -195,7 +199,7 @@ a.tag:hover {
 
         &:before {
             content: '';
-            top: -5px; 
+            top: -5px;
             left: -5px;
             bottom: -5px;
             right: -5px;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_header.scss

@@ -79,11 +79,6 @@ header {
         }
     }
 
-    // necessary on mobile only to make way for hamburger menu
-    &.nice-padding {
-        padding-left: $desktop-nice-padding;
-    }
-
     label {
         @include visuallyhidden();
     }
@@ -160,3 +155,9 @@ header {
         }
     }
 }
+
+.header-title {
+    @media screen and (max-width: $breakpoint-mobile) {
+        padding-left: $mobile-nav-indent;
+    }
+}

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_main-nav.scss

@@ -19,11 +19,13 @@ $footer-submenu: $submenu-color;
 }
 
 .nav-toggle.icon {
-    left: $mobile-nice-padding;
-    cursor: pointer;
     position: absolute;
+    padding-left: $mobile-nice-padding;
+    cursor: pointer;
 
     &:before {
+        position: relative;
+        top: 3px;
         font-size: 40px;
         color: $color-white;
         line-height: 40px;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/_messages.scss

@@ -1,4 +1,4 @@
-// Messages are specific to Django's 'Messaging' system which adds messages into the session, 
+// Messages are specific to Django's 'Messaging' system which adds messages into the session,
 // for display on the next page visited. These appear as an animated banner at the top of the page.
 //
 // For inline help text, see typography.scss