Merge pull request #2047 from rtCamp/fix/amp-sticky-header-rockfield

Rockfield: Fix sticky header on AMP page

rockfield/functions.php

@@ -171,8 +171,10 @@ function rockfield_scripts() {
 	// enqueue child RTL styles
 	wp_style_add_data( 'rockfield-style', 'rtl', 'replace' );
 
-	// enqueue header spacing JS
-	wp_enqueue_script('rockfield-fixed-header-spacing', get_stylesheet_directory_uri() . '/js/fixed-header-spacing.js', array(), wp_get_theme()->get( 'Version' ), true );
+	if ( ! rockfield_is_amp() ) {
+		// enqueue header spacing JS.
+		wp_enqueue_script( 'rockfield-fixed-header-spacing', get_stylesheet_directory_uri() . '/js/fixed-header-spacing.js', array(), wp_get_theme()->get( 'Version' ), true );
+	}
 
 }
 add_action( 'wp_enqueue_scripts', 'rockfield_scripts', 99 );
@@ -186,3 +188,10 @@ function rockfield_editor_styles() {
 	wp_enqueue_style( 'rockfield-editor-fonts', rockfield_fonts_url(), array(), null );
 }
 add_action( 'enqueue_block_editor_assets', 'rockfield_editor_styles' );
+
+/**
+ * Checks whether the endpoint is AMP.
+ */
+function rockfield_is_amp() {
+	return ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() );
+}

rockfield/sass/_extra-child-theme.scss

@@ -755,3 +755,25 @@ input[type="submit"] {
 		border-radius: 100px;
 	}
 }
+
+/**
+ * AMP Support
+ */
+html[amp] {
+
+	@include media( tablet ) {
+		#masthead {
+			position: sticky;
+			top: 0;
+		}
+
+		.logged-in #masthead {
+			top: 32px;
+		}
+	}
+	@media screen and ( max-width: 782px ) {
+		.logged-in #masthead {
+			top: 46px;
+		}
+	}
+}

rockfield/style-rtl.css

@@ -4688,3 +4688,22 @@ input[type="submit"] {
 .is-style-circular .wp-block-button__link:before {
 	border-radius: 100px;
 }
+
+/**
+ * AMP Support
+ */
+@media only screen and (min-width: 640px) {
+	html[amp] #masthead {
+		position: sticky;
+		top: 0;
+	}
+	html[amp] .logged-in #masthead {
+		top: 32px;
+	}
+}
+
+@media screen and (max-width: 782px) {
+	html[amp] .logged-in #masthead {
+		top: 46px;
+	}
+}

rockfield/style.css

@@ -4717,3 +4717,22 @@ input[type="submit"] {
 .is-style-circular .wp-block-button__link:before {
 	border-radius: 100px;
 }
+
+/**
+ * AMP Support
+ */
+@media only screen and (min-width: 640px) {
+	html[amp] #masthead {
+		position: sticky;
+		top: 0;
+	}
+	html[amp] .logged-in #masthead {
+		top: 32px;
+	}
+}
+
+@media screen and (max-width: 782px) {
+	html[amp] .logged-in #masthead {
+		top: 46px;
+	}
+}