Merge pull request #244 from OpenSourceOrg/fix/header-shrink-without-flicker-develop

Shrink the header on scroll again, without the flicker

Author: mlaetitia

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

@@ -45,10 +45,13 @@ $wrapperPad: 5vw; // duplicates the production Customizer CSS inset on body > .w
 $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
+$headerInnerHeight: 125px; // .header--inner at rest; also the spacer that holds its place in the flow
+$headerInnerHeightSmall: 90px; // .header--inner once scrolled
 $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
+$headerLogoHeight: 110px; // logo cap at rest; needs a length, not none, so the shrink can animate
+$headerLogoHeightSmall: 60px; // logo cap once scrolled
+$navPad: 2.1rem; // .nav-main vertical padding at rest
+$navPadSmall: .55rem; // .nav-main vertical padding once scrolled
 $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

@@ -1,21 +1,24 @@
 .header-main {
-    // position:fixed; // for header scroll
-    position: sticky;
+    position: fixed;
     top: 0;
-    width: 100%;
+    left: 0;
+    right: 0;
     z-index: 999;
     .button a {
         color: inherit;
     }
 }
 
-// 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.
+.header--spacer {
+    height: $headerInnerHeight;
+}
+
+html {
+    scroll-padding-top: calc(#{$headerInnerHeight} + var(--wp-admin--admin-bar--height, 0px));
+}
+
 .admin-bar .header-main {
-    @media only screen and (min-width: 601px) {
-        top: var(--wp-admin--admin-bar--height, 32px);
-    }
+    top: var(--wp-admin--admin-bar--height, 32px);
 }
 
 .header-main {
@@ -26,6 +29,7 @@
         height: $headerInnerHeight;
         display: flex;
         align-items: center;
+        transition: height .3s;
         @media only screen and (max-width: #{$break-nav - 0.06}) {
             background: #fff;
             padding: 16px;
@@ -116,7 +120,6 @@
 }
 
 @media only screen and (min-width: #{$break-nav}) {
-    .header--inner,
     .header--quicklinks-inner {
         // @include clearfix();
         padding-left: $maxPadding;
@@ -125,6 +128,17 @@
     .header--inner {
         border: 0;
         position: relative;
+        padding-left: calc(#{$wrapperPad} + #{$maxPadding});
+        padding-right: calc(#{$wrapperPad} + #{$maxPadding});
+    }
+    .header-main-small {
+        .header--inner {
+            height: $headerInnerHeightSmall;
+        }
+        .nav-main {
+            padding-bottom: $navPadSmall;
+            padding-top: $navPadSmall;
+        }
     }
     .header--blog-name {
         // hold the column at full-logo width: letting it shrink with the logo hands the
@@ -144,16 +158,14 @@
         clear: right;
         padding: 0;
     }
-    // full-bleed white: ::after escapes the wrapper inset so the background spans the
-    // page, which the design asks for whenever the header is white
     @mixin header-white-veil( $border: false ) {
         &::after {
             background-color: $Nwhite;
             @if $border {
                 border-bottom: 1px solid $Nlight;
             }
             content: '';
-            inset: 0 (-$wrapperPad);
+            inset: 0;
             position: absolute;
             z-index: -1;
         }

themes/osi/assets/scss/_6_components.mobile-menu.scss

@@ -291,6 +291,10 @@
             margin-right: $sidebarWidthMid;
             overflow: visible;
         }
+
+        .header-main {
+            transform: translateX(-$sidebarWidthMid);
+        }
     }
 
 }
@@ -302,6 +306,10 @@
             margin-left: -$sidebarWidthSmall;
             margin-right: $sidebarWidthSmall;
         }
+
+        .header-main {
+            transform: translateX(-$sidebarWidthSmall);
+        }
     }
 }
 

themes/osi/assets/scss/_6_components.navigation--subnav.scss

@@ -420,13 +420,13 @@ $chevronDown: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/sv
         display: grid;
         gap: 0 2.5rem;
         grid-template-columns: repeat(2, minmax(0, 1fr));
-        left: -$wrapperPad;
+        left: 0;
         max-height: none;
         max-width: none;
         overflow: visible;
         opacity: 0;
         padding: 2rem calc(#{$wrapperPad} + #{$maxPadding}) 2.5rem;
-        right: -$wrapperPad;
+        right: 0;
         text-align: left;
         top: 100%;
         transform: translateY(8px);

themes/osi/assets/scss/_6_components.navigation.scss

@@ -85,8 +85,8 @@ nav {
 // Main Nav
 .nav-main {
 	margin-left: auto;
-	padding: 2.1rem 0;
-	transition: all 0.8s ease;
+	padding: $navPad 0;
+	transition: padding .3s ease;
 
 	ul {
 		list-style: none;

themes/osi/header-ai.php

@@ -68,3 +68,4 @@
 				</section>
 			</div>
 		</header><!-- #masthead -->
+		<div class="header--spacer" aria-hidden="true"></div>

themes/osi/header.php

@@ -70,3 +70,4 @@
 				</section>
 			</div>
 		</header><!-- #masthead -->
+		<div class="header--spacer" aria-hidden="true"></div>