Merge pull request #243 from OpenSourceOrg/fix/header-stop-movement-develop

Stop the header moving when it scrolls

Author: mlaetitia

themes/osi/assets/scss/_1_settings.breakpoints.scss

@@ -46,7 +46,9 @@ $maxPadding: 48px; // duplicates var(--wp--custom--spacing--max-padding)
 
 // header dimensions
 $headerInnerHeight: 125px; // .header--inner fixed height; admin-bar offsets come from core's --wp-admin--admin-bar--height
-$headerLogoHeight: 110px; // logo cap at rest; needs a length, not none, so the shrink can animate
+$headerLogoWidth: 300px; // logo column width, held constant so the nav never reflows
+$headerLogoHeight: 110px;
+$headerLogoHeightSmall: 60px; // logo cap once scrolled // logo cap at rest; needs a length, not none, so the shrink can animate
 $mobileRowHeight: 34px; // mobile accordion row: the caret's 44px tap target centres its glyph on this
 $midPadding: 32px; // duplicates var(--wp--custom--spacing--mid-padding);
 $smallPadding: 16px; // duplicates var(--wp--custom--spacing--small-padding);

themes/osi/assets/scss/_6_components.header.scss

@@ -9,12 +9,12 @@
     }
 }
 
-.admin-bar {
-    .header-main.header-main-small {
-        top: 32px;
-        @media only screen and (max-width: 782px) {
-            top: 46px;
-        }
+// offset in both states, or the header drops 32px out from behind the admin bar the
+// moment it goes small. Core stops pinning the bar below 601px, where an offset would
+// leave a gap once it scrolls away.
+.admin-bar .header-main {
+    @media only screen and (min-width: 601px) {
+        top: var(--wp-admin--admin-bar--height, 32px);
     }
 }
 
@@ -54,7 +54,7 @@
             }
             img {
                 // all logos
-                max-width: 300px;
+                max-width: $headerLogoWidth;
                 max-height: $headerLogoHeight;
                 height: auto;
                 width: auto;
@@ -77,7 +77,7 @@
             .header--blog-name {
                 a {
                     img {
-                        max-height: 60px;
+                        max-height: $headerLogoHeightSmall;
                     }
                 }
             }
@@ -127,6 +127,10 @@
         position: relative;
     }
     .header--blog-name {
+        // hold the column at full-logo width: letting it shrink with the logo hands the
+        // nav that width and the menu reflows from two rows to one
+        flex-shrink: 0;
+        width: $headerLogoWidth;
         .hide-mobile {
             display: inline-block;
         }
@@ -179,17 +183,6 @@
     // source-order tie and drop the open panel's bottom border
     .header-main-small {
         @include header-white-veil;
-        .nav-main {
-            height: auto;
-            top: 0;
-            // transition: all .2s;
-            margin-top: 0;
-            .nav-main--menu>.menu-item>a {
-                padding-top: 0.6em;
-                padding-bottom: 0.5em;
-                transition: all .3s;
-            }
-        }
     }
 }