Browse Source

Fix sticky header on AMP page

Deepak Lalwani 5 years ago
parent
commit
5e9aafba0e
3 changed files with 62 additions and 0 deletions
  1. 22 0
      stratford/sass/_extra-child-theme.scss
  2. 20 0
      stratford/style-rtl.css
  3. 20 0
      stratford/style.css

+ 22 - 0
stratford/sass/_extra-child-theme.scss

@@ -16,6 +16,7 @@
  * 6.7. Posts List Block
  * 6.8. Search Block
  * 7. Widgets
+ * 8. AMP Support
  */
 
 $color_background: #{map-deep-get($config-global, "color", "background", "default")};
@@ -490,3 +491,24 @@ button[data-load-more-btn] {
 	font-family: $font_family_code;
 	font-size: $font_size_base;
 }
+
+/**
+ * 8. AMP Support
+ */
+html[amp] {
+	@include media( mobile ) {
+		.site-header {
+			position: sticky;
+			top: 0;
+		}
+
+		.logged-in .site-header {
+			top: 32px;
+		}
+	}
+	@media screen and ( max-width: 782px ) {
+		.logged-in .site-header {
+			top: 46px;
+		}
+	}
+}

+ 20 - 0
stratford/style-rtl.css

@@ -3972,6 +3972,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
  * 6.7. Posts List Block
  * 6.8. Search Block
  * 7. Widgets
+ * 8. AMP Support
  */
 /**
  * 1. General Styles
@@ -4394,3 +4395,22 @@ button[data-load-more-btn].has-background:visited {
 	font-family: "Inconsolata", monospace;
 	font-size: 1rem;
 }
+
+/**
+ * 8. AMP Support
+ */
+@media only screen and (min-width: 560px) {
+	html[amp] .site-header {
+		position: sticky;
+		top: 0;
+	}
+	html[amp] .logged-in .site-header {
+		top: 32px;
+	}
+}
+
+@media screen and (max-width: 782px) {
+	html[amp] .logged-in .site-header {
+		top: 46px;
+	}
+}

+ 20 - 0
stratford/style.css

@@ -4001,6 +4001,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
  * 6.7. Posts List Block
  * 6.8. Search Block
  * 7. Widgets
+ * 8. AMP Support
  */
 /**
  * 1. General Styles
@@ -4423,3 +4424,22 @@ button[data-load-more-btn].has-background:visited {
 	font-family: "Inconsolata", monospace;
 	font-size: 1rem;
 }
+
+/**
+ * 8. AMP Support
+ */
+@media only screen and (min-width: 560px) {
+	html[amp] .site-header {
+		position: sticky;
+		top: 0;
+	}
+	html[amp] .logged-in .site-header {
+		top: 32px;
+	}
+}
+
+@media screen and (max-width: 782px) {
+	html[amp] .logged-in .site-header {
+		top: 46px;
+	}
+}