changed mobile menu to be fixed and cover all the screen

dalston/style-rtl.css

@@ -4308,6 +4308,12 @@ a {
 		margin: 0;
 		justify-self: end;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 16px;
+		left: 16px;
+		z-index: 20000;
+	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		grid-area: menu-toggle;
 	}
@@ -4323,21 +4329,20 @@ a {
 		justify-self: end;
 		font-size: 0.75614rem;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
-		margin-top: 8px;
-	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
 		margin-top: 8px;
-		position: absolute;
+		position: fixed;
 		z-index: 100;
+		top: 0;
+		bottom: 0;
 		left: 0;
 		right: 0;
 		background: #FFFFFF;
-		padding: 0 16px 8px;
+		padding: 48px 16px 8px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: right;
@@ -4348,6 +4353,24 @@ a {
 		margin-top: 48px;
 		border-radius: 4.75px;
 	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 62px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
 }
 
 @media only screen and (max-width: 559px) {

dalston/style.css

@@ -4337,6 +4337,12 @@ a {
 		margin: 0;
 		justify-self: end;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
+		position: fixed;
+		top: 16px;
+		right: 16px;
+		z-index: 20000;
+	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		grid-area: menu-toggle;
 	}
@@ -4352,21 +4358,20 @@ a {
 		justify-self: end;
 		font-size: 0.75614rem;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"] {
-		margin-top: 8px;
-	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-cart[for="woocommerce-toggle"].button svg {
 		margin-top: -2px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
 		margin-top: 8px;
-		position: absolute;
+		position: fixed;
 		z-index: 100;
+		top: 0;
+		bottom: 0;
 		right: 0;
 		left: 0;
 		background: #FFFFFF;
-		padding: 0 16px 8px;
+		padding: 48px 16px 8px;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
 		text-align: left;
@@ -4377,6 +4382,24 @@ a {
 		margin-top: 48px;
 		border-radius: 4.75px;
 	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 45px;
+	}
+	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 61px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation > div {
+		top: 46px;
+	}
+	.mobile-nav-side.admin-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 62px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation > div {
+		top: 91px;
+	}
+	.mobile-nav-side.admin-bar.has-marketing-bar .site-header #site-navigation.main-navigation #toggle:checked + label {
+		top: 107px;
+	}
 }
 
 @media only screen and (max-width: 559px) {

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

@@ -1,3 +1,6 @@
+$wpcom-marketing-bar--height: 45px;
+$wpadmin-bar--height: 46px;
+
 // Updates the Mobile Navigation to be next to the site title.
 @include media(mobile-only) {
 	.mobile-nav-side {
@@ -48,14 +51,21 @@
 
 			.main-navigation {
 				grid-area: main-navigation;
-				//align-self: center;
 			}
 		}
 
 		.site-header #site-navigation.main-navigation {
 			margin: 0;
 			justify-self: end;
-			//text-align: right;
+
+			#toggle {
+				&:checked + label{
+					position: fixed;
+					top: 2 * $baseline-unit;
+					right: 2 * $baseline-unit;
+					z-index: 20000;
+				}
+			}
 
 			#toggle-menu {
 				grid-area: menu-toggle;
@@ -74,9 +84,6 @@
 				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;
 			}
@@ -84,12 +91,14 @@
 			& > div {
 				grid-area: dropdown-menu;
 				margin-top: $baseline-unit;
-				position: absolute;
+				position: fixed;
 				z-index: 100;
+				top: 0;
+				bottom: 0;
 				right: 0;
 				left: 0;
 				background: #{map-deep-get($config-global, "color", "background", "default") };
-				padding: 0 (2 * $baseline-unit) $baseline-unit;
+				padding: (6 * $baseline-unit) (2 * $baseline-unit) $baseline-unit;
 			}
 
 			.woocommerce-menu-container {
@@ -102,6 +111,35 @@
 				border-radius: #{map-deep-get($config-global, "border-radius", "xs" )};
 			}
 		}
+		&.has-marketing-bar {
+			//Consider marketing bar height
+			.site-header #site-navigation.main-navigation > div{
+				top: $wpcom-marketing-bar--height;
+			}
+			.site-header #site-navigation.main-navigation #toggle:checked + label {
+				top: (2 * $baseline-unit) + $wpcom-marketing-bar--height;
+			}
+		}
+
+		&.admin-bar {
+			//Consider admin bar height
+			.site-header #site-navigation.main-navigation > div{
+				top: $wpadmin-bar--height;
+			}
+			.site-header #site-navigation.main-navigation #toggle:checked + label {
+				top: (2 * $baseline-unit) + $wpadmin-bar--height;
+			}
+		}
+
+		&.admin-bar.has-marketing-bar {
+			//Consider admin bar height + marketing bar height
+			.site-header #site-navigation.main-navigation > div{
+				top: $wpadmin-bar--height + $wpcom-marketing-bar--height;
+			}
+			.site-header #site-navigation.main-navigation #toggle:checked + label {
+				top: (2 * $baseline-unit) + $wpadmin-bar--height + $wpcom-marketing-bar--height;
+			}
+		}
 	}
 }