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

Coutoire: Fix sticky header on AMP page

coutoire/functions.php

@@ -174,8 +174,10 @@ function coutoire_scripts() {
 	// enqueue child RTL styles
 	wp_style_add_data( 'coutoire-style', 'rtl', 'replace' );
 
-	// enqueue header spacing JS
-	wp_enqueue_script('coutoire-fixed-header-spacing', get_stylesheet_directory_uri() . '/js/fixed-header-spacing.js', array(), wp_get_theme()->get( 'Version' ), true );
+	if ( ! coutoire_is_amp() ) {
+		// enqueue header spacing JS.
+		wp_enqueue_script( 'coutoire-fixed-header-spacing', get_stylesheet_directory_uri() . '/js/fixed-header-spacing.js', array(), wp_get_theme()->get( 'Version' ), true );
+	}
 
 }
 add_action( 'wp_enqueue_scripts', 'coutoire_scripts', 99 );
@@ -189,3 +191,10 @@ function coutoire_editor_styles() {
 	wp_enqueue_style( 'coutoire-editor-fonts', coutoire_fonts_url(), array(), null );
 }
 add_action( 'enqueue_block_editor_assets', 'coutoire_editor_styles' );
+
+/**
+ * Checks whether the endpoint is AMP.
+ */
+function coutoire_is_amp() {
+	return ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() );
+}

coutoire/sass/_extra-child-theme.scss

@@ -327,3 +327,29 @@ a.wp-block-file__button {
 @include media(desktop) {
 
 }
+
+/**
+ * AMP Support
+ */
+ html[amp] {
+
+	@include media( tablet ) {
+		.site-header {
+			position: sticky;
+			top: 0;
+		}
+
+		.logged-in .site-header {
+			top: 32px;
+		}
+
+		.content-area {
+			margin: 0;
+		}
+	}
+	@media screen and ( max-width: 782px ) {
+		.logged-in .site-header {
+			top: 46px;
+		}
+	}
+}

coutoire/style-rtl.css

@@ -4289,3 +4289,25 @@ a.wp-block-file__button {
 		text-align: right;
 	}
 }
+
+/**
+ * AMP Support
+ */
+@media only screen and (min-width: 640px) {
+	html[amp] .site-header {
+		position: sticky;
+		top: 0;
+	}
+	html[amp] .logged-in .site-header {
+		top: 32px;
+	}
+	html[amp] .content-area {
+		margin: 0;
+	}
+}
+
+@media screen and (max-width: 782px) {
+	html[amp] .logged-in #masthead {
+		top: 46px;
+	}
+}

coutoire/style.css

@@ -4318,3 +4318,25 @@ a.wp-block-file__button {
 		text-align: left;
 	}
 }
+
+/**
+ * AMP Support
+ */
+@media only screen and (min-width: 640px) {
+	html[amp] .site-header {
+		position: sticky;
+		top: 0;
+	}
+	html[amp] .logged-in .site-header {
+		top: 32px;
+	}
+	html[amp] .content-area {
+		margin: 0;
+	}
+}
+
+@media screen and (max-width: 782px) {
+	html[amp] .logged-in .site-header {
+		top: 46px;
+	}
+}