Merge pull request #1544 from Automattic/fix/stratford-issue-1529

Stratford: Better fixed header

stratford/functions.php

@@ -183,6 +183,8 @@ function stratford_scripts() {
 	// enqueue child RTL styles
 	wp_style_add_data( 'stratford-style', 'rtl', 'replace' );
 
+	// enqueue header spacing JS
+	wp_enqueue_script('stratford-fixed-header-spacing', get_stylesheet_directory_uri() . '/js/fixed-header-spacing.js', array(), wp_get_theme()->get( 'Version' ), true );
 }
 add_action( 'wp_enqueue_scripts', 'stratford_scripts', 99 );
 

stratford/js/fixed-header-spacing.js

@@ -0,0 +1,85 @@
+(function() {
+
+	/**
+	 * Debounce
+	 *
+	 * @param {Function} func
+	 * @param {number} wait
+	 * @param {boolean} immediate
+	 */
+	function debounce(func, wait, immediate) {
+		'use strict';
+
+		var timeout;
+		wait      = (typeof wait !== 'undefined') ? wait : 20;
+		immediate = (typeof immediate !== 'undefined') ? immediate : true;
+
+		return function() {
+
+			var context = this, args = arguments;
+			var later = function() {
+				timeout = null;
+
+				if (!immediate) {
+					func.apply(context, args);
+				}
+			};
+
+			var callNow = immediate && !timeout;
+
+			clearTimeout(timeout);
+			timeout = setTimeout(later, wait);
+
+			if (callNow) {
+				func.apply(context, args);
+			}
+		};
+	}
+
+	/**
+	 * Get page header height and use it for top-margin on
+	 * site-content when above mobile breakpoint
+	 */
+	function pageHeaderHeight() {
+		var body = document.body;
+
+		if ( document.documentElement.clientWidth < 560 ) {
+			document.getElementById( "primary" ).style.marginTop = 0;
+			body.classList.remove( 'wp-sticky-header' );
+		} else {
+			var header  = document.getElementById( 'masthead' );
+			var content = document.getElementById( 'primary' );
+
+			content.style.marginTop = header.offsetHeight + "px";
+
+			if ( document.documentElement.clientHeight / 5 - header.offsetHeight >= 0 ) {
+				body.classList.add( 'wp-sticky-header' );
+			} else {
+				body.classList.remove( 'wp-sticky-header' );
+			}
+		}
+	};
+
+	/**
+	 * Run our function every time the window resizes
+	 */
+	var isResizing = false;
+	window.addEventListener( 'resize',
+		debounce( function() {
+			if ( isResizing ) {
+				return;
+			}
+
+			isResizing = true;
+			setTimeout( function() {
+				pageHeaderHeight();
+				isResizing = false;
+			}, 150 );
+		} )
+	);
+
+	/**
+	 * Run our page header height function
+	 */
+	pageHeaderHeight();
+})();

stratford/sass/_extra-child-theme.scss

@@ -82,13 +82,11 @@ a {
  */
 #masthead {
 	border-bottom: 1px solid $color_background_light;
-	position: fixed;
-	z-index: 9999;
 	background: $color_background;
-	width: 100%;
 	-webkit-transition: all .25s ease-in-out;
-    -moz-transition: all .25s ease-in-out;
-    transition: all .25s ease-in-out;
+	-moz-transition: all .25s ease-in-out;
+	transition: all .25s ease-in-out;
+	width: 100%;
 	.site-header-wrapper {
 		display: flex;
 		flex-wrap: wrap;
@@ -97,12 +95,11 @@ a {
 		-webkit-align-items: center;
 		-ms-flex-align: center;
 		align-items: center;
-		width: calc(100% - 1.5em);
+
 		.site-branding {
 			-webkit-transition: margin-top .25s ease-in-out;
 			-moz-transition: margin-top .25s ease-in-out;
 			transition: margin-top .25s ease-in-out;
-			margin-left: 1.5em;
 			margin-right: auto;
 			.site-description {
 				display: none;
@@ -211,21 +208,16 @@ a {
 
 }
 
- @include media(mobile-only) {
-	#masthead {
-		max-height: 100%;
-		overflow-y: scroll;
-		.site-header-wrapper {
-			width: 100%;
-			.site-branding {
-				margin-left: 0;
-			}
-		}
-	}
+@include media(mobile) {
 	.site-header {
-		position: relative;
+		padding-right: $spacing_vertical;
+		padding-left: $spacing_vertical;
+		position: fixed;
+		z-index: 9999;
 	}
+}
 
+ @include media(mobile-only) {
 	.site-title,
 	.site-description {
 		font-size: $font_size_xl;
@@ -233,25 +225,6 @@ a {
 	}
 }
 
-/**
- * 3. Main Wrapper and Content
- */
-.site-content {
-	padding-top: 4.75em;
-}
-
-.home.page.hide-homepage-title {
-	.site-content {
-		.site-main {
-			padding-top: 0;
-		}
-		@include media(mobile-only) {
-			padding-top: 4em;
-		}
-	}
-}
-
-
 /**
  * 4. Navigation
  */
@@ -442,4 +415,4 @@ input[type="submit"],
 .wp-block-verse {
 	font-family: $font_family_code;
 	font-size: $font_size_base;
-}
+}

stratford/style-rtl.css

@@ -3658,13 +3658,11 @@ p:not(.site-title) a:hover {
  */
 #masthead {
 	border-bottom: 1px solid #f3f3f3;
-	position: fixed;
-	z-index: 9999;
 	background: white;
-	width: 100%;
 	-webkit-transition: all .25s ease-in-out;
 	-moz-transition: all .25s ease-in-out;
 	transition: all .25s ease-in-out;
+	width: 100%;
 }
 
 #masthead .site-header-wrapper {
@@ -3675,14 +3673,12 @@ p:not(.site-title) a:hover {
 	-webkit-align-items: center;
 	-ms-flex-align: center;
 	align-items: center;
-	width: calc(100% - 1.5em);
 }
 
 #masthead .site-header-wrapper .site-branding {
 	-webkit-transition: margin-top .25s ease-in-out;
 	-moz-transition: margin-top .25s ease-in-out;
 	transition: margin-top .25s ease-in-out;
-	margin-right: 1.5em;
 	margin-left: auto;
 }
 
@@ -3768,20 +3764,16 @@ p:not(.site-title) a:hover {
 	}
 }
 
-@media only screen and (max-width: 559px) {
-	#masthead {
-		max-height: 100%;
-		overflow-y: scroll;
-	}
-	#masthead .site-header-wrapper {
-		width: 100%;
-	}
-	#masthead .site-header-wrapper .site-branding {
-		margin-right: 0;
-	}
+@media only screen and (min-width: 560px) {
 	.site-header {
-		position: relative;
+		padding-left: 32px;
+		padding-right: 32px;
+		position: fixed;
+		z-index: 9999;
 	}
+}
+
+@media only screen and (max-width: 559px) {
 	.site-title,
 	.site-description {
 		font-size: 1.728rem;
@@ -3789,23 +3781,6 @@ p:not(.site-title) a:hover {
 	}
 }
 
-/**
- * 3. Main Wrapper and Content
- */
-.site-content {
-	padding-top: 4.75em;
-}
-
-.home.page.hide-homepage-title .site-content .site-main {
-	padding-top: 0;
-}
-
-@media only screen and (max-width: 559px) {
-	.home.page.hide-homepage-title .site-content {
-		padding-top: 4em;
-	}
-}
-
 /**
  * 4. Navigation
  */

stratford/style.css

@@ -3687,13 +3687,11 @@ p:not(.site-title) a:hover {
  */
 #masthead {
 	border-bottom: 1px solid #f3f3f3;
-	position: fixed;
-	z-index: 9999;
 	background: white;
-	width: 100%;
 	-webkit-transition: all .25s ease-in-out;
 	-moz-transition: all .25s ease-in-out;
 	transition: all .25s ease-in-out;
+	width: 100%;
 }
 
 #masthead .site-header-wrapper {
@@ -3704,14 +3702,12 @@ p:not(.site-title) a:hover {
 	-webkit-align-items: center;
 	-ms-flex-align: center;
 	align-items: center;
-	width: calc(100% - 1.5em);
 }
 
 #masthead .site-header-wrapper .site-branding {
 	-webkit-transition: margin-top .25s ease-in-out;
 	-moz-transition: margin-top .25s ease-in-out;
 	transition: margin-top .25s ease-in-out;
-	margin-left: 1.5em;
 	margin-right: auto;
 }
 
@@ -3797,20 +3793,16 @@ p:not(.site-title) a:hover {
 	}
 }
 
-@media only screen and (max-width: 559px) {
-	#masthead {
-		max-height: 100%;
-		overflow-y: scroll;
-	}
-	#masthead .site-header-wrapper {
-		width: 100%;
-	}
-	#masthead .site-header-wrapper .site-branding {
-		margin-left: 0;
-	}
+@media only screen and (min-width: 560px) {
 	.site-header {
-		position: relative;
+		padding-right: 32px;
+		padding-left: 32px;
+		position: fixed;
+		z-index: 9999;
 	}
+}
+
+@media only screen and (max-width: 559px) {
 	.site-title,
 	.site-description {
 		font-size: 1.728rem;
@@ -3818,23 +3810,6 @@ p:not(.site-title) a:hover {
 	}
 }
 
-/**
- * 3. Main Wrapper and Content
- */
-.site-content {
-	padding-top: 4.75em;
-}
-
-.home.page.hide-homepage-title .site-content .site-main {
-	padding-top: 0;
-}
-
-@media only screen and (max-width: 559px) {
-	.home.page.hide-homepage-title .site-content {
-		padding-top: 4em;
-	}
-}
-
 /**
  * 4. Navigation
  */