used template areas for menu layout

alves/style-rtl.css

@@ -4447,35 +4447,52 @@ body:not(.fse-enabled) #masthead {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: left;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4492,6 +4509,7 @@ body:not(.fse-enabled) #masthead {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;

alves/style.css

@@ -4476,35 +4476,52 @@ body:not(.fse-enabled) #masthead {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: right;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4521,6 +4538,7 @@ body:not(.fse-enabled) #masthead {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;

barnsbury/style-rtl.css

@@ -4392,35 +4392,52 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: left;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4437,6 +4454,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;

barnsbury/style.css

@@ -4421,35 +4421,52 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: right;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4466,6 +4483,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;

dalston/sass/_extra-child-theme.scss

@@ -322,11 +322,22 @@ a {
 // Updates the Mobile Navigation to be next to the site title.
 @import "../../varia/sass/components/header/_site-mobile-nav-side";
 
-.mobile-nav-side .main-navigation {
-	@include media(mobile-only) {
-		.dropdown-icon {
-			/* This is fixed the issue when the button changes widths */
-			font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
+@include media(mobile-only) {
+	.mobile-nav-side {
+		.site-header.has-menu {
+			.site-branding {
+				grid-area: site-logo;
+				justify-self: center;
+			}
+			.site-logo {
+				grid-area: unset;
+			}
+		}
+		.main-navigation {
+			.dropdown-icon {
+				/* This is fixed the issue when the button changes widths */
+				font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;
+			}
 		}
 	}
 }

dalston/style-rtl.css

@@ -4269,35 +4269,52 @@ a {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: left;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4314,6 +4331,7 @@ a {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
@@ -4341,6 +4359,13 @@ a {
 }
 
 @media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-header.has-menu .site-branding {
+		grid-area: site-logo;
+		justify-self: center;
+	}
+	.mobile-nav-side .site-header.has-menu .site-logo {
+		grid-area: unset;
+	}
 	.mobile-nav-side .main-navigation .dropdown-icon {
 		/* This is fixed the issue when the button changes widths */
 		font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;

dalston/style.css

@@ -4298,35 +4298,52 @@ a {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: right;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4343,6 +4360,7 @@ a {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
@@ -4370,6 +4388,13 @@ a {
 }
 
 @media only screen and (max-width: 559px) {
+	.mobile-nav-side .site-header.has-menu .site-branding {
+		grid-area: site-logo;
+		justify-self: center;
+	}
+	.mobile-nav-side .site-header.has-menu .site-logo {
+		grid-area: unset;
+	}
 	.mobile-nav-side .main-navigation .dropdown-icon {
 		/* This is fixed the issue when the button changes widths */
 		font-family: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Tahoma;

hever/style-rtl.css

@@ -4469,35 +4469,52 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: left;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4514,6 +4531,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;

hever/style.css

@@ -4498,35 +4498,52 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: right;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4543,6 +4560,7 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;

mayland/sass/_extra-child-theme.scss

@@ -313,13 +313,21 @@ a {
 // Updates the Mobile Navigation to be next to the site title.
 @import "../../varia/sass/components/header/_site-mobile-nav-side";
 
-.mobile-nav-side .has-menu .site-title {
-	@include media(mobile-only) {
-		margin-bottom: 3 * $baseline-unit;
-	}
-}
-.mobile-nav-side .has-logo .site-title {
-	@include media(mobile-only) {
-		margin-bottom: 0;
+@include media(mobile-only) {
+	.mobile-nav-side {
+		.site-header.has-menu {
+			.site-branding {
+				grid-area: site-logo;
+				justify-self: center;
+			}
+			.site-logo {
+				grid-area: unset;
+			}
+			&.has-title-and-tagline {
+				grid-template-areas: 
+					"site-logo site-logo" 
+					"social-navigation main-navigation";
+			}
+		}
 	}
-}
+}

mayland/style-rtl.css

@@ -4298,35 +4298,52 @@ strong {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: left;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4343,6 +4360,7 @@ strong {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
@@ -4370,13 +4388,14 @@ strong {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .has-menu .site-title {
-		margin-bottom: 24px;
+	.mobile-nav-side .site-header.has-menu .site-branding {
+		grid-area: site-logo;
+		justify-self: center;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .has-logo .site-title {
-		margin-bottom: 0;
+	.mobile-nav-side .site-header.has-menu .site-logo {
+		grid-area: unset;
+	}
+	.mobile-nav-side .site-header.has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
 }

mayland/style.css

@@ -4327,35 +4327,52 @@ strong {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: right;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4372,6 +4389,7 @@ strong {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
@@ -4399,13 +4417,14 @@ strong {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .has-menu .site-title {
-		margin-bottom: 24px;
+	.mobile-nav-side .site-header.has-menu .site-branding {
+		grid-area: site-logo;
+		justify-self: center;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .has-logo .site-title {
-		margin-bottom: 0;
+	.mobile-nav-side .site-header.has-menu .site-logo {
+		grid-area: unset;
+	}
+	.mobile-nav-side .site-header.has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
 }

morden/sass/_extra-child-theme.scss

@@ -611,89 +611,12 @@ article .entry-header .entry-title,
 }
 
 // Updates the Mobile Navigation to be next to the site title.
+@import "../../varia/sass/components/header/_site-mobile-nav-side";
+
 @include media(mobile-only) {
 	.mobile-nav-side {
-		.site-header-wrap.has-menu {
-			position: relative;
-			display: grid;
-			grid-template-columns: repeat(4, 1fr);
-			grid-gap: 2px;
-
-			& > * {
-				grid-column-start: 1;
-				grid-column-end: span 3;
-				margin: 0!important;
-			}
-
-			.site-title {
-				align-self: end;
-			}
-
-			.site-description {
-				align-self: start;
-			}
-		}
-
-		.site-header .main-navigation ~ * {
-			grid-column-start: 1;
-			grid-column-end: span col4-end;
-		}
-
-		.site-header #site-navigation.main-navigation {
-			grid-column-start: 4;
-			grid-column-end: col4-end;
-			grid-row-start: 1;
-			grid-row-end: 3;
+		#masthead .site-header-wrap > *:not(.site-logo) {
 			margin: 0;
-			justify-self: end;
-
-			#toggle-cart[for="woocommerce-toggle"].button,
-			#toggle-menu {
-				padding: (1.5 * $baseline-unit);
-				display: inline-block;
-				text-align: center;
-				justify-self: end;
-				font-size: #{map-deep-get($config-global, "font", "size", "xs" )};
-			}
-			#toggle-cart[for="woocommerce-toggle"] {
-				margin-top: $baseline-unit;
-			}
-			#toggle-cart[for="woocommerce-toggle"].button svg {
-				margin-top: -2px;
-			}
-
-			.main-menu-container {
-				margin-top: $baseline-unit;
-				position: absolute;
-				z-index: 100;
-				right: 0;
-				left: 0;
-				font-weight: normal;
-				background: #{map-deep-get($config-global, "color", "foreground", "dark") };
-				padding: 0 (2 * $baseline-unit) $baseline-unit;
-				border-radius: #{map-deep-get($config-global, "border-radius", "xs" )};
-
-				a {
-					padding: $baseline-unit 0;
-					line-height: 1;
-					font-weight: normal;
-				}
-			}
-
-			.woocommerce-cart-widget {
-				background: #{map-deep-get($config-global, "color", "foreground", "dark") };
-				border-radius: #{map-deep-get($config-global, "border-radius", "xs" )};
-				padding: $baseline-unit (2 * $baseline-unit );
-			}
-
-			.woocommerce-menu-container {
-				text-align: left;
-				position: absolute;
-				left: 0;
-				right: 0;
-				margin-top: 6 * $baseline-unit;
-
-			}
 		}
 	}
-}
+}

morden/style-rtl.css

@@ -4562,35 +4562,53 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header-wrap.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header-wrap.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0 !important;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header-wrap.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header-wrap.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: 1;
-		grid-row-end: 3;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
+	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		padding: 12px;
@@ -4606,32 +4624,36 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		left: 0;
-		right: 0;
-		font-weight: normal;
-		background: #101010;
+		left: 16px;
+		right: 16px;
+		background: #F8F8F8;
 		padding: 0 16px 8px;
+		border: 1px solid #C5C5C5;
 		border-radius: 5px;
+		text-align: right;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
-		font-weight: normal;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-cart-widget {
-		background: #101010;
-		border-radius: 5px;
-		padding: 8px 16px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: right;
 		position: absolute;
-		right: 0;
-		left: 0;
+		left: 16px;
+		right: 16px;
+		width: calc(100% - 32px);
 		margin-top: 48px;
+		border-radius: 5px;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side #masthead .site-header-wrap > *:not(.site-logo) {
+		margin: 0;
 	}
 }
 

morden/style.css

@@ -4591,35 +4591,53 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header-wrap.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header-wrap.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0 !important;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
 	}
-	.mobile-nav-side .site-header-wrap.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header-wrap.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: 1;
-		grid-row-end: 3;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
+	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		padding: 12px;
@@ -4635,32 +4653,36 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;
-		right: 0;
-		left: 0;
-		font-weight: normal;
-		background: #101010;
+		right: 16px;
+		left: 16px;
+		background: #F8F8F8;
 		padding: 0 16px 8px;
+		border: 1px solid #C5C5C5;
 		border-radius: 5px;
+		text-align: left;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
-		font-weight: normal;
-	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-cart-widget {
-		background: #101010;
-		border-radius: 5px;
-		padding: 8px 16px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: left;
 		position: absolute;
-		left: 0;
-		right: 0;
+		right: 16px;
+		left: 16px;
+		width: calc(100% - 32px);
 		margin-top: 48px;
+		border-radius: 5px;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side #masthead .site-header-wrap > *:not(.site-logo) {
+		margin: 0;
 	}
 }
 

rivington/style-rtl.css

@@ -4425,35 +4425,52 @@ p:not(.site-title) a:hover {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: left;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4470,6 +4487,7 @@ p:not(.site-title) a:hover {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;

rivington/style.css

@@ -4454,35 +4454,52 @@ p:not(.site-title) a:hover {
 }
 
 @media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header.has-menu {
+	.mobile-nav-side .has-menu {
 		position: relative;
 		display: grid;
-		grid-template-columns: repeat(4, 1fr);
 		grid-gap: 2px;
+		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
 	}
-	.mobile-nav-side .site-header.has-menu > * {
-		grid-column-start: 1;
-		grid-column-end: span 3;
-		margin: 0;
+	.mobile-nav-side .has-menu:before, .mobile-nav-side .has-menu:after {
+		content: none;
 	}
-	.mobile-nav-side .site-header.has-menu .site-title {
+	.mobile-nav-side .has-menu.has-title-and-tagline {
+		grid-template-areas: "site-logo site-logo"  "site-title main-navigation"  "site-description main-navigation"  "social-navigation social-navigation";
+	}
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-title {
+		grid-area: site-title;
 		align-self: end;
 	}
-	.mobile-nav-side .site-header.has-menu .site-description {
+	.mobile-nav-side .has-menu.has-title-and-tagline .site-description {
+		grid-area: site-description;
 		align-self: start;
 	}
-	.mobile-nav-side .site-header .main-navigation ~ * {
-		grid-column-start: 1;
-		grid-column-end: span col4-end;
+	.mobile-nav-side .has-menu > *:not(.site-logo) {
+		margin: 0;
+	}
+	.mobile-nav-side .has-menu .site-logo {
+		grid-area: site-logo;
+		justify-self: center;
+		margin: 8px 0;
+	}
+	.mobile-nav-side .has-menu .social-navigation {
+		grid-area: social-navigation;
+		align-self: center;
+	}
+	.mobile-nav-side .has-menu .main-navigation {
+		grid-area: main-navigation;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation {
-		grid-column-start: 4;
-		grid-column-end: col4-end;
-		grid-row-start: row1-start;
-		grid-row-end: 4;
+		display: grid;
+		grid-template-areas: "menu-toggle cart-toggle" "dropdown-menu dropdown-menu";
 		margin: 0;
 		justify-self: end;
-		text-align: right;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		grid-area: menu-toggle;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
+		grid-area: cart-toggle;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
@@ -4499,6 +4516,7 @@ p:not(.site-title) a:hover {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
+		grid-area: dropdown-menu;
 		margin-top: 8px;
 		position: absolute;
 		z-index: 100;

varia/sass/components/header/_site-mobile-nav-side.scss

@@ -1,40 +1,74 @@
 // Updates the Mobile Navigation to be next to the site title.
 @include media(mobile-only) {
 	.mobile-nav-side {
-		.site-header.has-menu {
+		.has-menu {
+			&:before,
+			&:after {
+				content: none;
+			}
 			position: relative;
 			display: grid;
-			grid-template-columns: repeat(4, 1fr);
 			grid-gap: 2px;
+			grid-template-areas: 
+				"site-logo site-logo" 
+				"social-navigation main-navigation";
+
+			&.has-title-and-tagline {
+				grid-template-areas: 
+					"site-logo site-logo" 
+					"site-title main-navigation" 
+					"site-description main-navigation" 
+					"social-navigation social-navigation";
 
-			& > * {
-				grid-column-start: 1;
-				grid-column-end: span 3;
+				.site-title {
+					grid-area: site-title;
+					align-self: end;
+				}
+
+				.site-description {
+					grid-area: site-description;
+					align-self: start;
+				}
+			}
+
+			& > *:not(.site-logo) {
 				margin: 0;
 			}
 
-			.site-title {
-				align-self: end;
+			.site-logo {
+				grid-area: site-logo;
+				justify-self: center;
+				margin: $baseline-unit 0;
 			}
 
-			.site-description {
-				align-self: start;
+			.social-navigation {
+				grid-area: social-navigation;
+				align-self: center;
 			}
-		}
 
-		.site-header .main-navigation ~ * {
-			grid-column-start: 1;
-			grid-column-end: span col4-end;
+			.main-navigation {
+				grid-area: main-navigation;
+				//align-self: center;
+			}
 		}
 
 		.site-header #site-navigation.main-navigation {
-			grid-column-start: 4;
-			grid-column-end: col4-end;
-			grid-row-start: row1-start;
-			grid-row-end: 4;
+			display: grid;
+			grid-template-areas: 
+				"menu-toggle cart-toggle"
+				"dropdown-menu dropdown-menu";
+
 			margin: 0;
 			justify-self: end;
-			text-align: right;
+			//text-align: right;
+
+			#toggle-menu {
+				grid-area: menu-toggle;
+			}
+
+			#toggle-cart[for="woocommerce-toggle"] {
+				grid-area: cart-toggle;
+			}
 
 			#toggle-cart[for="woocommerce-toggle"].button,
 			#toggle-menu {
@@ -52,6 +86,7 @@
 			}
 
 			.main-menu-container {
+				grid-area: dropdown-menu;
 				margin-top: $baseline-unit;
 				position: absolute;
 				z-index: 100;