Use css grid to style the side nav

alves/sass/_config-child-theme-deep.scss

@@ -132,6 +132,7 @@ $config-global: (
 
 	/* Border radius */
 	"border-radius": (
+		"xs": (0.25 * $typescale-root),
 		"sm": (0.5 * $typescale-root),
 		"md": (0.75 * $typescale-root),
 		"lg": $typescale-root,

alves/sass/_extra-child-theme.scss

@@ -574,5 +574,4 @@ body:not(.fse-enabled) {
 }
 
 // Updates the Mobile Navigation to be next to the site title.
-$mobile-nav-side-right-margin: 145px;
 @import "../../varia/sass/components/header/_site-mobile-nav-side";

alves/style-rtl.css

@@ -4447,29 +4447,53 @@ body:not(.fse-enabled) #masthead {
 }
 
 @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: 145px;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.86806rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		left: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		right: 16px;
 		background: #fafafa;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #9B6A36;
+		border-radius: 4px;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

alves/style.css

@@ -4476,29 +4476,53 @@ body:not(.fse-enabled) #masthead {
 }
 
 @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: 145px;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.86806rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		right: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		left: 16px;
 		background: #fafafa;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #9B6A36;
+		border-radius: 4px;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

barnsbury/sass/_config-child-theme-deep.scss

@@ -132,6 +132,7 @@ $config-global: (
 
 	/* Border radius */
 	"border-radius": (
+		"xs": ( 0.25 * $typescale-root ),
 		"sm": (0.5 * $typescale-root),
 		"md": (0.75 * $typescale-root),
 		"lg": $typescale-root,

barnsbury/sass/_extra-child-theme.scss

@@ -394,5 +394,4 @@ a {
 	}
 }
 // 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

@@ -4392,29 +4392,53 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 }
 
 @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;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.71818rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		left: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		right: 16px;
 		background: #FDF9EC;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #3C2323;
+		border-radius: 5px;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

barnsbury/style.css

@@ -4421,29 +4421,53 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 }
 
 @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;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.71818rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		right: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		left: 16px;
 		background: #FDF9EC;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #3C2323;
+		border-radius: 5px;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

dalston/sass/_config-child-theme-deep.scss

@@ -132,6 +132,7 @@ $config-global: (
 
 	/* Border radius */
 	"border-radius": (
+		"xs": (0.25 * $typescale-root),
 		"sm": (0.5 * $typescale-root),
 		"md": (0.75 * $typescale-root),
 		"lg": $typescale-root,

dalston/sass/_extra-child-theme.scss

@@ -320,7 +320,6 @@ a {
 
 
 // Updates the Mobile Navigation to be next to the site title.
-$mobile-nav-side-right-margin: 90px;
 @import "../../varia/sass/components/header/_site-mobile-nav-side";
 
 .mobile-nav-side .main-navigation {

dalston/style-rtl.css

@@ -4269,29 +4269,53 @@ a {
 }
 
 @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: 90px;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		left: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		right: 16px;
 		background: #FAFAFA;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #CCCCCC;
+		border-radius: 4.75px;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

dalston/style.css

@@ -4298,29 +4298,53 @@ a {
 }
 
 @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: 90px;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		right: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		left: 16px;
 		background: #FAFAFA;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #CCCCCC;
+		border-radius: 4.75px;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

hever/sass/_config-child-theme-deep.scss

@@ -132,6 +132,7 @@ $config-global: (
 
 	/* Border radius */
 	"border-radius": (
+		"xs": (0.25 * $typescale-root),
 		"sm": (0.25 * $typescale-root),
 		"md": (0.5 * $typescale-root),
 		"lg": (0.75 * $typescale-root),

hever/sass/_extra-child-theme.scss

@@ -493,5 +493,4 @@ article .entry-header .entry-title,
 }
 
 // Updates the Mobile Navigation to be next to the site title.
-$mobile-nav-side-right-margin: 110px;
 @import "../../varia/sass/components/header/_site-mobile-nav-side";

hever/style-rtl.css

@@ -4469,29 +4469,53 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 }
 
 @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: 110px;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		left: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		right: 16px;
 		background: #F8F8F8;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #C5C5C5;
+		border-radius: 5px;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

hever/style.css

@@ -4498,29 +4498,53 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 }
 
 @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: 110px;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		right: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		left: 16px;
 		background: #F8F8F8;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #C5C5C5;
+		border-radius: 5px;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

mayland/sass/_config-child-theme-deep.scss

@@ -132,6 +132,7 @@ $config-global: (
 
 	/* Border radius */
 	"border-radius": (
+		"xs": (0.25 * $typescale-root),
 		"sm": (0.25 * $typescale-root),
 		"md": (0.5 * $typescale-root),
 		"lg": $typescale-root,

mayland/sass/_extra-child-theme.scss

@@ -311,7 +311,6 @@ a {
 }
 
 // Updates the Mobile Navigation to be next to the site title.
-$mobile-nav-side-right-margin: 90px;
 @import "../../varia/sass/components/header/_site-mobile-nav-side";
 
 .mobile-nav-side .has-menu .site-title {

mayland/style-rtl.css

@@ -4298,29 +4298,53 @@ strong {
 }
 
 @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: 90px;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.69444rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		left: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		right: 16px;
 		background: #f2f2f2;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #e6e6e6;
+		border-radius: 5px;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

mayland/style.css

@@ -4327,29 +4327,53 @@ strong {
 }
 
 @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: 90px;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.69444rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		right: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		left: 16px;
 		background: #f2f2f2;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #e6e6e6;
+		border-radius: 5px;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

morden/sass/_config-child-theme-deep.scss

@@ -132,6 +132,7 @@ $config-global: (
 
 	/* Border radius */
 	"border-radius": (
+		"xs": (0.25 * $typescale-root),
 		"sm": (0.25 * $typescale-root),
 		"md": (0.5 * $typescale-root),
 		"lg": (0.75 * $typescale-root),

morden/sass/_extra-child-theme.scss

@@ -611,17 +611,68 @@ article .entry-header .entry-title,
 }
 
 // Updates the Mobile Navigation to be next to the site title.
-$mobile-nav-side-right-margin: 115px;
-@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;
 
-.mobile-nav-side .main-navigation {
-	@include media(mobile-only) {
-		#toggle-menu {
-			top: 0; /** Specific to Morden **/
-			right: 0; /** Specific to Morden **/
+			& > * {
+				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;
 		}
-		.menu-main-menu-container {
-			background: transparent;
+
+		.site-header #site-navigation.main-navigation {
+			grid-column-start: 4;
+			grid-column-end: col4-end;
+			grid-row-start: 1;
+			grid-row-end: 3;
+			margin: 0;
+			justify-self: end;
+
+			#toggle-menu {
+				padding: (1.5 * $baseline-unit);
+				display: inline-block;
+				text-align: center;
+				font-size: #{map-deep-get($config-global, "font", "size", "xs" )};
+			}
+
+			.menu-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" )};
+			}
+
+			.menu-main-menu-container {
+				a {
+					padding: $baseline-unit 0;
+					line-height: 1;
+					font-weight: normal;
+				}
+			}
 		}
 	}
 }

morden/style-rtl.css

@@ -4562,43 +4562,56 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 }
 
 @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: 115px;
+	.mobile-nav-side .site-header-wrap.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
-		position: absolute;
-		top: 16px;
-		left: 16px;
+	.mobile-nav-side .site-header-wrap.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0 !important;
 	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
-		background: #F8F8F8;
-		margin: 0 -16px;
-		padding: 0 16px 8px;
+	.mobile-nav-side .site-header-wrap.has-menu .site-title {
+		align-self: end;
 	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
-		padding-right: 16px;
-		/** todo: variable */
+	.mobile-nav-side .site-header-wrap.has-menu .site-description {
+		align-self: start;
 	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
+	.mobile-nav-side .site-header .main-navigation ~ * {
+		grid-column-start: 1;
+		grid-column-end: span col4-end;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
-		top: 0;
-		/** Specific to Morden **/
+	.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;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
+		position: absolute;
+		z-index: 100;
 		left: 0;
-		/** Specific to Morden **/
+		right: 0;
+		font-weight: normal;
+		background: #101010;
+		padding: 0 16px 8px;
+		border-radius: 5px;
 	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
-		background: transparent;
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
+		padding: 8px 0;
+		line-height: 1;
+		font-weight: normal;
 	}
 }
 

morden/style.css

@@ -4591,43 +4591,56 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 }
 
 @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: 115px;
+	.mobile-nav-side .site-header-wrap.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
-		position: absolute;
-		top: 16px;
-		right: 16px;
+	.mobile-nav-side .site-header-wrap.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0 !important;
 	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
-		background: #F8F8F8;
-		margin: 0 -16px;
-		padding: 0 16px 8px;
+	.mobile-nav-side .site-header-wrap.has-menu .site-title {
+		align-self: end;
 	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container .sub-menu {
-		padding-left: 16px;
-		/** todo: variable */
+	.mobile-nav-side .site-header-wrap.has-menu .site-description {
+		align-self: start;
 	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container a {
-		padding: 8px 0;
-		line-height: 1;
+	.mobile-nav-side .site-header .main-navigation ~ * {
+		grid-column-start: 1;
+		grid-column-end: span col4-end;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
-		top: 0;
-		/** Specific to Morden **/
+	.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;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.75614rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
+		position: absolute;
+		z-index: 100;
 		right: 0;
-		/** Specific to Morden **/
+		left: 0;
+		font-weight: normal;
+		background: #101010;
+		padding: 0 16px 8px;
+		border-radius: 5px;
 	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
-		background: transparent;
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
+		padding: 8px 0;
+		line-height: 1;
+		font-weight: normal;
 	}
 }
 

rivington/sass/_config-child-theme-deep.scss

@@ -132,6 +132,7 @@ $config-global: (
 
 	/* Border radius */
 	"border-radius": (
+		"xs": (0.25 * $typescale-root),
 		"sm": (0.25 * $typescale-root),
 		"md": (0.5 * $typescale-root),
 		"lg": $typescale-root,

rivington/sass/_extra-child-theme.scss

@@ -459,5 +459,4 @@ a {
 }
 
 // Updates the Mobile Navigation to be next to the site title.
-$mobile-nav-side-right-margin: 90px;
 @import "../../varia/sass/components/header/_site-mobile-nav-side";

rivington/style-rtl.css

@@ -4425,29 +4425,52 @@ p:not(.site-title) a:hover {
 }
 
 @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: 90px;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.64rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		left: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		right: 16px;
 		background: #0d1f55;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #353a46;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

rivington/style.css

@@ -4454,29 +4454,52 @@ p:not(.site-title) a:hover {
 }
 
 @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: 90px;
+	.mobile-nav-side .site-header.has-menu {
+		position: relative;
+		display: grid;
+		grid-template-columns: repeat(4, 1fr);
+		grid-gap: 2px;
 	}
-}
-
-@media only screen and (max-width: 559px) {
-	.mobile-nav-side .main-navigation #toggle-menu {
+	.mobile-nav-side .site-header.has-menu > * {
+		grid-column-start: 1;
+		grid-column-end: span 3;
+		margin: 0;
+	}
+	.mobile-nav-side .site-header.has-menu .site-title {
+		align-self: end;
+	}
+	.mobile-nav-side .site-header.has-menu .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 .site-header #site-navigation.main-navigation {
+		grid-column-start: 4;
+		grid-column-end: col4-end;
+		grid-row-start: row1-start;
+		grid-row-end: 4;
+		margin: 0;
+		justify-self: end;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
+		padding: 12px;
+		display: inline-block;
+		text-align: center;
+		font-size: 0.64rem;
+	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container {
+		margin-top: 8px;
 		position: absolute;
-		top: 16px;
+		z-index: 100;
 		right: 16px;
-	}
-	.mobile-nav-side .main-navigation .menu-main-menu-container {
+		left: 16px;
 		background: #0d1f55;
-		margin: 0 -16px;
 		padding: 0 16px 8px;
+		border: 1px solid #353a46;
 	}
-	.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 {
+	.mobile-nav-side .site-header #site-navigation.main-navigation .menu-main-menu-container a {
 		padding: 8px 0;
 		line-height: 1;
 	}

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

@@ -1,31 +1,66 @@
 // Updates the Mobile Navigation to be next to the site title.
-.mobile-nav-side .has-menu .site-logo,
-.mobile-nav-side .has-menu .site-title,
-.mobile-nav-side .has-menu .site-description {
-  @include media(mobile-only) {
-    margin-right: $mobile-nav-side-right-margin;
-  }
-}
+@include media(mobile-only) {
+	.mobile-nav-side {
+		.site-header.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;
+			}
+
+			.site-title {
+				align-self: end;
+			}
+
+			.site-description {
+				align-self: start;
+			}
+		}
+
+		.site-header .main-navigation ~ * {
+			grid-column-start: 1;
+			grid-column-end: span col4-end;
+		}
 
-.mobile-nav-side .main-navigation {
-  @include media(mobile-only) {
-    #toggle-menu {
-      position: absolute;
-      top: 2 * $baseline-unit;
-      right: 2 * $baseline-unit;
-    }
-
-    .menu-main-menu-container {
-      background: #{map-deep-get($config-global, "color", "background", "light") };
-      margin:0 (-2 * $baseline-unit );
-      padding: 0 (2 * $baseline-unit) $baseline-unit;
-      .sub-menu {
-        padding-left: 2 * $baseline-unit;  /** todo: variable */
-      }
-      a {
-        padding: $baseline-unit 0;
-        line-height: 1;
-      }
-    }
-  }
+		.site-header #site-navigation.main-navigation {
+			grid-column-start: 4;
+			grid-column-end: col4-end;
+			grid-row-start: row1-start;
+			grid-row-end: 4;
+			margin: 0;
+			justify-self: end;
+
+			#toggle-menu {
+				padding: (1.5 * $baseline-unit);
+				display: inline-block;
+				text-align: center;
+				font-size: #{map-deep-get($config-global, "font", "size", "xs" )};
+			}
+
+			.menu-main-menu-container {
+				margin-top: $baseline-unit;
+				position: absolute;
+				z-index: 100;
+				right: 2 * $baseline-unit;
+				left: 2 * $baseline-unit;
+				background: #{map-deep-get($config-global, "color", "background", "light") };
+				padding: 0 (2 * $baseline-unit) $baseline-unit;
+				border: 1px solid #{map-deep-get( $config-global,"color","border","default")};
+				border-radius: #{map-deep-get($config-global, "border-radius", "xs" )};
+			}
+
+			.menu-main-menu-container {
+				a {
+					padding: $baseline-unit 0;
+					line-height: 1;
+				}
+			}
+		}
+	}
 }
+