Mobile fixes for menu navigation.

stratford/sass/_extra-child-theme.scss

@@ -49,7 +49,6 @@ a {
 	-webkit-transition: all .25s ease-in-out;
     -moz-transition: all .25s ease-in-out;
     transition: all .25s ease-in-out;
-
 	.site-header-wrapper {
 		display: flex;
 		flex-wrap: wrap;	
@@ -83,9 +82,6 @@ a {
 		.main-navigation {
 			> ul {
 				> li {
-					&:first-child {
-						margin-left: 0;
-					}
 					&.current-menu-item {
 						a {
 							border-color: $color_secondary;
@@ -98,16 +94,6 @@ a {
 			}
 			ul {
 				li {
-					margin: 0 .75em;
-					&:first-child {
-						margin-left: 0;
-					}
-					&:hover {
-						ul {
-							left: auto;
-							right: 0;
-						}
-					}
 					&.current-menu-item {
 						> a {
 							border-color: $color_secondary;
@@ -117,7 +103,6 @@ a {
 						}
 					}
 					a {
-						padding: .25em 0;
 						&::after {
 							color: $color_primary_hover;
 						}
@@ -135,8 +120,41 @@ a {
 									border: none;
 								}
 							}
-							a {
-								padding: .75em;
+						}
+					}
+				}
+			}
+			
+		}
+		@include media(mobile) {
+			.main-navigation {
+				> ul {
+					> li {
+						&:first-child {
+							margin-left: 0;
+						}
+					}
+				}
+				ul {
+					li {
+						margin: 0 .75em;
+						&:first-child {
+							margin-left: 0;
+						}
+						&:hover {
+							ul {
+								left: auto;
+								right: 0;
+							}
+						}
+						a {
+							padding: .25em 0;
+						}
+						ul {
+							li {
+								a {
+									padding: .75em;
+								}
 							}
 						}
 					}
@@ -296,4 +314,28 @@ body {
 			font-size: $font_size_widget_title;
 		}
 	}
+}
+
+
+@include media(mobile-only) {
+	#masthead {
+		max-height: 100%;
+		overflow-y: scroll;
+	}
+	.site-header {
+		position: relative;
+		padding-right: $spacing_vertical;
+	}
+
+	.site-title,
+	.site-description {
+		font-size: #{map-deep-get($config-global, "font", "size", "lg")};
+		hyphens: auto;
+	}
+
+	#toggle-menu {
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
 }

stratford/style-rtl.css

@@ -3442,10 +3442,6 @@ a {
 	flex: 0 1 auto;
 }
 
-#masthead .site-header-wrapper .main-navigation > ul > li:first-child {
-	margin-right: 0;
-}
-
 #masthead .site-header-wrapper .main-navigation > ul > li.current-menu-item a {
 	border-color: #3e69dc;
 	border-style: solid;
@@ -3453,19 +3449,6 @@ a {
 	color: #3e69dc;
 }
 
-#masthead .site-header-wrapper .main-navigation ul li {
-	margin: 0 .75em;
-}
-
-#masthead .site-header-wrapper .main-navigation ul li:first-child {
-	margin-right: 0;
-}
-
-#masthead .site-header-wrapper .main-navigation ul li:hover ul {
-	right: auto;
-	left: 0;
-}
-
 #masthead .site-header-wrapper .main-navigation ul li.current-menu-item > a {
 	border-color: #3e69dc;
 	border-style: solid;
@@ -3473,10 +3456,6 @@ a {
 	color: #3e69dc;
 }
 
-#masthead .site-header-wrapper .main-navigation ul li a {
-	padding: .25em 0;
-}
-
 #masthead .site-header-wrapper .main-navigation ul li a::after {
 	color: #3e69dc;
 }
@@ -3498,8 +3477,26 @@ a {
 	border: none;
 }
 
-#masthead .site-header-wrapper .main-navigation ul li ul li a {
-	padding: .75em;
+@media only screen and (min-width: 560px) {
+	#masthead .site-header-wrapper .main-navigation > ul > li:first-child {
+		margin-right: 0;
+	}
+	#masthead .site-header-wrapper .main-navigation ul li {
+		margin: 0 .75em;
+	}
+	#masthead .site-header-wrapper .main-navigation ul li:first-child {
+		margin-right: 0;
+	}
+	#masthead .site-header-wrapper .main-navigation ul li:hover ul {
+		right: auto;
+		left: 0;
+	}
+	#masthead .site-header-wrapper .main-navigation ul li a {
+		padding: .25em 0;
+	}
+	#masthead .site-header-wrapper .main-navigation ul li ul li a {
+		padding: .75em;
+	}
 }
 
 .social-links-menu {
@@ -3562,13 +3559,6 @@ input[type="submit"].has-background:visited,
 	padding-top: 4.75em;
 }
 
-.wp-block-coblocks-hero__box .wp-block-button,
-.wp-block-cover__inner-container .wp-block-button,
-.wp-block-columns .wp-block-button,
-.wp-block-group .wp-block-button {
-	padding-bottom: 16px;
-}
-
 .wp-block-coblocks-hero__box .wp-block-latest-posts,
 .wp-block-cover__inner-container .wp-block-latest-posts,
 .wp-block-columns .wp-block-latest-posts,
@@ -3643,3 +3633,20 @@ input[type="submit"].has-background:visited,
 .site-footer .widget-area .widget-title {
 	font-size: 2.0736rem;
 }
+
+@media only screen and (max-width: 559px) {
+	.site-header {
+		position: relative;
+		padding-left: 32px;
+	}
+	.site-title,
+	.site-description {
+		font-size: 1.44rem;
+		hyphens: auto;
+	}
+	#toggle-menu {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+}

stratford/style.css

@@ -3447,10 +3447,6 @@ a {
 	flex: 0 1 auto;
 }
 
-#masthead .site-header-wrapper .main-navigation > ul > li:first-child {
-	margin-left: 0;
-}
-
 #masthead .site-header-wrapper .main-navigation > ul > li.current-menu-item a {
 	border-color: #3e69dc;
 	border-style: solid;
@@ -3458,19 +3454,6 @@ a {
 	color: #3e69dc;
 }
 
-#masthead .site-header-wrapper .main-navigation ul li {
-	margin: 0 .75em;
-}
-
-#masthead .site-header-wrapper .main-navigation ul li:first-child {
-	margin-left: 0;
-}
-
-#masthead .site-header-wrapper .main-navigation ul li:hover ul {
-	left: auto;
-	right: 0;
-}
-
 #masthead .site-header-wrapper .main-navigation ul li.current-menu-item > a {
 	border-color: #3e69dc;
 	border-style: solid;
@@ -3478,10 +3461,6 @@ a {
 	color: #3e69dc;
 }
 
-#masthead .site-header-wrapper .main-navigation ul li a {
-	padding: .25em 0;
-}
-
 #masthead .site-header-wrapper .main-navigation ul li a::after {
 	color: #3e69dc;
 }
@@ -3503,8 +3482,26 @@ a {
 	border: none;
 }
 
-#masthead .site-header-wrapper .main-navigation ul li ul li a {
-	padding: .75em;
+@media only screen and (min-width: 560px) {
+	#masthead .site-header-wrapper .main-navigation > ul > li:first-child {
+		margin-left: 0;
+	}
+	#masthead .site-header-wrapper .main-navigation ul li {
+		margin: 0 .75em;
+	}
+	#masthead .site-header-wrapper .main-navigation ul li:first-child {
+		margin-left: 0;
+	}
+	#masthead .site-header-wrapper .main-navigation ul li:hover ul {
+		left: auto;
+		right: 0;
+	}
+	#masthead .site-header-wrapper .main-navigation ul li a {
+		padding: .25em 0;
+	}
+	#masthead .site-header-wrapper .main-navigation ul li ul li a {
+		padding: .75em;
+	}
 }
 
 .social-links-menu {
@@ -3641,3 +3638,24 @@ input[type="submit"].has-background:visited,
 .site-footer .widget-area .widget-title {
 	font-size: 2.0736rem;
 }
+
+@media only screen and (max-width: 559px) {
+	#masthead {
+		max-height: 100%;
+		overflow-y: scroll;
+	}
+	.site-header {
+		position: relative;
+		padding-right: 32px;
+	}
+	.site-title,
+	.site-description {
+		font-size: 1.44rem;
+		hyphens: auto;
+	}
+	#toggle-menu {
+		position: absolute;
+		top: 0;
+		right: 0;
+	}
+}