diff --git a/alves/sass/_config-child-theme-deep.scss b/alves/sass/_config-child-theme-deep.scss
index 5d2e7ac3a09227f7a10fb9b4748a29e758bf0ce9..ae726e79137a2724a346bcb33a525de0d54d9ce9 100644
--- a/alves/sass/_config-child-theme-deep.scss
+++ b/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,
diff --git a/alves/sass/_extra-child-theme.scss b/alves/sass/_extra-child-theme.scss
index 561d7ba7acca0d58843e50a538d2639612663463..915978530707cba95c0fa4c1fc22cfdc47273c4d 100644
--- a/alves/sass/_extra-child-theme.scss
+++ b/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";
diff --git a/alves/style-rtl.css b/alves/style-rtl.css
index 2e57c0c8c09ba3c4052fb9919558d67f0c57d20f..748ca34ee6770aa1b194583943884970e62edfa0 100644
--- a/alves/style-rtl.css
+++ b/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;
 	}
diff --git a/alves/style.css b/alves/style.css
index f7e406929c6a0c84da0ac14c94ecfb8198f70720..b0529a6048586dc4e3cfcd9c9aaacbdd5bb5cc4b 100644
--- a/alves/style.css
+++ b/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;
 	}
diff --git a/barnsbury/sass/_config-child-theme-deep.scss b/barnsbury/sass/_config-child-theme-deep.scss
index 096c61d2210627432a3d5bff19916ab712a3c742..95562ca8bcbe340ea555d510c1543d86fe836ac1 100644
--- a/barnsbury/sass/_config-child-theme-deep.scss
+++ b/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,
diff --git a/barnsbury/sass/_extra-child-theme.scss b/barnsbury/sass/_extra-child-theme.scss
index 89c5dc56f73d0f28da65a8c9347ee13f091ae4c0..56504587f143237aac347b78e93d33ccf7ae96b8 100644
--- a/barnsbury/sass/_extra-child-theme.scss
+++ b/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";
diff --git a/barnsbury/style-rtl.css b/barnsbury/style-rtl.css
index 9b39ce4096e7eb908f1ea586e427af170d4fc398..689b9b6d348830c8bba3d12a077c778727255957 100644
--- a/barnsbury/style-rtl.css
+++ b/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;
 	}
diff --git a/barnsbury/style.css b/barnsbury/style.css
index 97e7754ea1863546a8690607348e8fb4562b3eab..992336fd2f8f90c6278de5c7ac548a8b357e2929 100644
--- a/barnsbury/style.css
+++ b/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;
 	}
diff --git a/dalston/sass/_config-child-theme-deep.scss b/dalston/sass/_config-child-theme-deep.scss
index 131c45a0797a0f7488380c5af006a35e410328aa..c7674bb1d3b5b457d02711f5344350105d605995 100644
--- a/dalston/sass/_config-child-theme-deep.scss
+++ b/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,
diff --git a/dalston/sass/_extra-child-theme.scss b/dalston/sass/_extra-child-theme.scss
index df0bfd38c3f5cf7e3cfd49d3adb87131ea8a5ac1..169044f68e52ffc6b36bd1787d753be629f85cec 100644
--- a/dalston/sass/_extra-child-theme.scss
+++ b/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 {
diff --git a/dalston/style-rtl.css b/dalston/style-rtl.css
index 4f6c2be522dcbf33674914f34712e9c0266153c8..32bd0d2f061f63572bd1ea09f002e3baa345d218 100644
--- a/dalston/style-rtl.css
+++ b/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;
 	}
diff --git a/dalston/style.css b/dalston/style.css
index d7a622c63c75223dd5be8be01412bc153ee72fe3..2cfaa8f00a61ddcf5b6f9bb8f690f57a9a90df74 100644
--- a/dalston/style.css
+++ b/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;
 	}
diff --git a/hever/sass/_config-child-theme-deep.scss b/hever/sass/_config-child-theme-deep.scss
index 009d59d052a14babd4e6c109efb78a0cb084df99..d80d957bb7628b76b6f46ad1de5f7750203c0ff0 100644
--- a/hever/sass/_config-child-theme-deep.scss
+++ b/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),
diff --git a/hever/sass/_extra-child-theme.scss b/hever/sass/_extra-child-theme.scss
index cd039186ba15450a855fb8ccc9f2a3021d04530c..90cd28c18b4c0e30950ae267a70ced345005516a 100644
--- a/hever/sass/_extra-child-theme.scss
+++ b/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";
diff --git a/hever/style-rtl.css b/hever/style-rtl.css
index 09b0b4758351b31e8d412b57f67ba85153d16920..066adb81e96820a61ddc4649452493216f852ddc 100644
--- a/hever/style-rtl.css
+++ b/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;
 	}
diff --git a/hever/style.css b/hever/style.css
index 63bd0788c199f34c735f45eb9c71ca68ce641616..10518ed5be918e94817ff0602e8ff797296828b3 100644
--- a/hever/style.css
+++ b/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;
 	}
diff --git a/mayland/sass/_config-child-theme-deep.scss b/mayland/sass/_config-child-theme-deep.scss
index 94282eddf14c264f4fb49bfc2ace545072e02afc..8b78c5d4b3c5192274ac68f94f62210412a7499f 100644
--- a/mayland/sass/_config-child-theme-deep.scss
+++ b/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,
diff --git a/mayland/sass/_extra-child-theme.scss b/mayland/sass/_extra-child-theme.scss
index 16bd37b7a5523efc28d950e03d5669106d2fe033..a6dde782f24f3e4762787797faa39649d3f29d80 100644
--- a/mayland/sass/_extra-child-theme.scss
+++ b/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 {
diff --git a/mayland/style-rtl.css b/mayland/style-rtl.css
index 557f0f301e5c676e0981dbe0acb0c7284697fe66..b727caa594fcb62803b56c51c02ad2b743db5dbf 100644
--- a/mayland/style-rtl.css
+++ b/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;
 	}
diff --git a/mayland/style.css b/mayland/style.css
index 1b634ab093800b1aa5002fd3c3deed150fd1b448..00d348cea75c5de0033b7b6db4628b76d0068b75 100644
--- a/mayland/style.css
+++ b/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;
 	}
diff --git a/morden/sass/_config-child-theme-deep.scss b/morden/sass/_config-child-theme-deep.scss
index 8e1333b8725e073fed5b24adcfdd1468dc6083ff..a2081ab518f12132798148e3d19ab635a7232eb0 100644
--- a/morden/sass/_config-child-theme-deep.scss
+++ b/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),
diff --git a/morden/sass/_extra-child-theme.scss b/morden/sass/_extra-child-theme.scss
index 2a2db22690cf50ed72ca0752ca81cd1577771d1f..33d57d52f894c0434b8c2d269048c1ac095de413 100644
--- a/morden/sass/_extra-child-theme.scss
+++ b/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;
+				}
+			}
 		}
 	}
 }
diff --git a/morden/style-rtl.css b/morden/style-rtl.css
index 2d6a9d08fc8db71520672887dc7d48778b7c4a0f..61dbdc35e1178838d5a937506eaf123c270fb3fe 100644
--- a/morden/style-rtl.css
+++ b/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;
 	}
 }
 
diff --git a/morden/style.css b/morden/style.css
index 37ff8a98bea34eeb33acd44262cfa21be50eaf33..49937c1181f0ff2d4aa04b90dc6038d06447f520 100644
--- a/morden/style.css
+++ b/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;
 	}
 }
 
diff --git a/rivington/sass/_config-child-theme-deep.scss b/rivington/sass/_config-child-theme-deep.scss
index cbd565b78fbf69ea5e87e14fda6ac047a69a2021..b1ec82c8cbfd1b1ddb7e50dfa275f7980b51fe5e 100644
--- a/rivington/sass/_config-child-theme-deep.scss
+++ b/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,
diff --git a/rivington/sass/_extra-child-theme.scss b/rivington/sass/_extra-child-theme.scss
index dd15a30c83d045adaff9590c612a209cf43cdf85..aa42695f05b144f3a06d5dd7476030d40d5cfb86 100644
--- a/rivington/sass/_extra-child-theme.scss
+++ b/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";
diff --git a/rivington/style-rtl.css b/rivington/style-rtl.css
index 1e92022dd1513ba2d4233bd7adac87ddb681eddf..7773ce3eba9ebca9ac08dba55eb496eb3e5f21d3 100644
--- a/rivington/style-rtl.css
+++ b/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;
 	}
diff --git a/rivington/style.css b/rivington/style.css
index 8f94f383d6cf2db863ed9c3bb7b44b374bfb7c4d..6a29baebae197b60d8a8cfd75ff768bd92d684b2 100644
--- a/rivington/style.css
+++ b/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;
 	}
diff --git a/varia/sass/components/header/_site-mobile-nav-side.scss b/varia/sass/components/header/_site-mobile-nav-side.scss
index 5e715be29d00a6bc2b9cfda06632429735c86b90..c30418ace551442c3a6b0112cc9f0ad489d88b79 100644
--- a/varia/sass/components/header/_site-mobile-nav-side.scss
+++ b/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;
+				}
+			}
+		}
+	}
 }
+