Browse Source

Rockfield: Fix sticky header on AMP page

Deepak Lalwani 5 years ago
parent
commit
af24717e6c
3 changed files with 60 additions and 0 deletions
  1. 22 0
      rockfield/sass/_extra-child-theme.scss
  2. 19 0
      rockfield/style-rtl.css
  3. 19 0
      rockfield/style.css

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

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

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