Revert "Use CSS grid to align the menu"

This reverts commit 8ab0d49cc7e4b6e7b77b5df7f1bc5fb494c7166c.

barnsbury/sass/_extra-child-theme.scss

@@ -47,45 +47,6 @@ a {
 	}
 }
 
-// Grid definitions
-.site-logo {
-	grid-area: site-logo;
-}
-.site-title {
-	grid-area: site-title;
-}
-.site-description {
-	grid-area: site-description;
-}
-.main-navigation {
-	grid-area: main-navigation;
-}
-.social-navigation {
-	grid-area: social-navigation;
-}
-
-@include media(mobile-only) {
-	.mobile-nav-side .site-header {
-		align-items: start;
-		display: grid;
-		grid-template-columns: auto;
-		grid-template-rows: auto;
-		grid-column-gap: $spacing_unit;
-		grid-template-areas:
-			"site-logo site-logo"
-			"site-title main-navigation"
-			"site-description main-navigation";
-
-		.site-description {
-			// TODO - align with the grid above
-		}
-
-		.main-navigation {
-			text-align: right;
-		}
-	}
-}
-
 /**
  * CSS-grid Desktop Menu
  */
@@ -117,14 +78,17 @@ a {
 				"site-logo main-navigation"
 				"site-logo social-navigation";
 		}
+
 	}
 
 	.site-logo {
+		grid-area: site-logo;
 		margin-bottom: $spacing_unit;
 	}
 
 	.site-title {
 		align-self: flex-end;
+		grid-area: site-title;
 
 		& + .site-description {
 			margin-top: 0;
@@ -133,10 +97,12 @@ a {
 
 	.site-description {
 		align-self: center;
+		grid-area: site-description;
 	}
 
 	.main-navigation {
 		align-self: center;
+		grid-area: main-navigation;
 		justify-self: flex-end;
 
 		& > div > ul {
@@ -198,6 +164,7 @@ a {
 
 	.social-navigation {
 		align-self: center;
+		grid-area: social-navigation;
 		justify-self: flex-end;
 	}
 }
@@ -426,3 +393,6 @@ a {
 		margin-top: $spacing_unit;
 	}
 }
+// Updates the Mobile Navigation to be next to the site title.
+$mobile-nav-side-right-margin: 100px;
+@import "../../varia/sass/components/header/_site-mobile-nav-side";

barnsbury/style-rtl.css

@@ -4027,40 +4027,6 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	transform: translateZ(0);
 }
 
-.site-logo {
-	grid-area: site-logo;
-}
-
-.site-title {
-	grid-area: site-title;
-}
-
-.site-description {
-	grid-area: site-description;
-}
-
-.main-navigation {
-	grid-area: main-navigation;
-}
-
-.social-navigation {
-	grid-area: social-navigation;
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header {
-		align-items: start;
-		display: grid;
-		grid-template-columns: auto;
-		grid-template-rows: auto;
-		grid-column-gap: 16px;
-		grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description main-navigation";
-	}
-	.mobile-nav-side .site-header .main-navigation {
-		text-align: left;
-	}
-}
-
 /**
  * CSS-grid Desktop Menu
  */
@@ -4085,19 +4051,23 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		grid-template-areas: "site-logo main-navigation" "site-logo social-navigation";
 	}
 	.site-logo {
+		grid-area: site-logo;
 		margin-bottom: 16px;
 	}
 	.site-title {
 		align-self: flex-end;
+		grid-area: site-title;
 	}
 	.site-title + .site-description {
 		margin-top: 0;
 	}
 	.site-description {
 		align-self: center;
+		grid-area: site-description;
 	}
 	.main-navigation {
 		align-self: center;
+		grid-area: main-navigation;
 		justify-self: flex-end;
 	}
 	.main-navigation > div > ul {
@@ -4155,6 +4125,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	}
 	.social-navigation {
 		align-self: center;
+		grid-area: social-navigation;
 		justify-self: flex-end;
 	}
 }
@@ -4419,3 +4390,32 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .wp-block-latest-posts .wp-block-latest-posts__post-full-content {
 	margin-top: 16px;
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu .site-logo,
+	.mobile-nav-side .has-menu .site-title,
+	.mobile-nav-side .has-menu .site-description {
+		margin-left: 100px;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .main-navigation #toggle-menu {
+		position: absolute;
+		top: 16px;
+		left: 16px;
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		background: #FDF9EC;
+		margin: 0 -16px;
+		padding: 0 16px 8px;
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
+		padding-right: 16px;
+		/** todo: variable */
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container a {
+		padding: 8px 0;
+		line-height: 1;
+	}
+}

barnsbury/style.css

@@ -4056,40 +4056,6 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	transform: translateZ(0);
 }
 
-.site-logo {
-	grid-area: site-logo;
-}
-
-.site-title {
-	grid-area: site-title;
-}
-
-.site-description {
-	grid-area: site-description;
-}
-
-.main-navigation {
-	grid-area: main-navigation;
-}
-
-.social-navigation {
-	grid-area: social-navigation;
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .site-header {
-		align-items: start;
-		display: grid;
-		grid-template-columns: auto;
-		grid-template-rows: auto;
-		grid-column-gap: 16px;
-		grid-template-areas: "site-logo site-logo" "site-title main-navigation" "site-description main-navigation";
-	}
-	.mobile-nav-side .site-header .main-navigation {
-		text-align: right;
-	}
-}
-
 /**
  * CSS-grid Desktop Menu
  */
@@ -4114,19 +4080,23 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		grid-template-areas: "site-logo main-navigation" "site-logo social-navigation";
 	}
 	.site-logo {
+		grid-area: site-logo;
 		margin-bottom: 16px;
 	}
 	.site-title {
 		align-self: flex-end;
+		grid-area: site-title;
 	}
 	.site-title + .site-description {
 		margin-top: 0;
 	}
 	.site-description {
 		align-self: center;
+		grid-area: site-description;
 	}
 	.main-navigation {
 		align-self: center;
+		grid-area: main-navigation;
 		justify-self: flex-end;
 	}
 	.main-navigation > div > ul {
@@ -4184,6 +4154,7 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	}
 	.social-navigation {
 		align-self: center;
+		grid-area: social-navigation;
 		justify-self: flex-end;
 	}
 }
@@ -4448,3 +4419,32 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .wp-block-latest-posts .wp-block-latest-posts__post-full-content {
 	margin-top: 16px;
 }
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .has-menu .site-logo,
+	.mobile-nav-side .has-menu .site-title,
+	.mobile-nav-side .has-menu .site-description {
+		margin-right: 100px;
+	}
+}
+
+@media only screen and (max-width: 559px) {
+	.mobile-nav-side .main-navigation #toggle-menu {
+		position: absolute;
+		top: 16px;
+		right: 16px;
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		background: #FDF9EC;
+		margin: 0 -16px;
+		padding: 0 16px 8px;
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
+		padding-left: 16px;
+		/** todo: variable */
+	}
+	.mobile-nav-side .main-navigation .menu-main-menu-container a {
+		padding: 8px 0;
+		line-height: 1;
+	}
+}