ソースを参照

Coutoire: Fix sticky header on AMP page

Deepak Lalwani 5 年 前
コミット
be7ba39813
3 ファイル変更70 行追加0 行削除
  1. 26 0
      coutoire/sass/_extra-child-theme.scss
  2. 22 0
      coutoire/style-rtl.css
  3. 22 0
      coutoire/style.css

+ 26 - 0
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;
+		}
+	}
+}

+ 22 - 0
coutoire/style-rtl.css

@@ -4251,3 +4251,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;
+	}
+}

+ 22 - 0
coutoire/style.css

@@ -4280,3 +4280,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;
+	}
+}