Fix position of the menu button, update support for woo nav to work the same way as regualar nav

alves/style-rtl.css

@@ -4490,11 +4490,13 @@ body:not(.fse-enabled) #masthead {
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		left: 16px;
 		z-index: 20000;
+		margin-left: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4517,9 +4519,10 @@ body:not(.fse-enabled) #masthead {
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4531,15 +4534,6 @@ body:not(.fse-enabled) #masthead {
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: right;
-		position: absolute;
-		left: 16px;
-		right: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 4px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}

alves/style.css

@@ -4519,11 +4519,13 @@ body:not(.fse-enabled) #masthead {
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		right: 16px;
 		z-index: 20000;
+		margin-right: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4546,9 +4548,10 @@ body:not(.fse-enabled) #masthead {
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4560,15 +4563,6 @@ body:not(.fse-enabled) #masthead {
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: left;
-		position: absolute;
-		right: 16px;
-		left: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 4px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}

barnsbury/style-rtl.css

@@ -4435,11 +4435,13 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		left: 16px;
 		z-index: 20000;
+		margin-left: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4462,9 +4464,10 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4476,15 +4479,6 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: right;
-		position: absolute;
-		left: 16px;
-		right: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 5px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}

barnsbury/style.css

@@ -4464,11 +4464,13 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		right: 16px;
 		z-index: 20000;
+		margin-right: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4491,9 +4493,10 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4505,15 +4508,6 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: left;
-		position: absolute;
-		right: 16px;
-		left: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 5px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}

dalston/style-rtl.css

@@ -4312,11 +4312,13 @@ a {
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		left: 16px;
 		z-index: 20000;
+		margin-left: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4339,9 +4341,10 @@ a {
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4353,15 +4356,6 @@ a {
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: right;
-		position: absolute;
-		left: 16px;
-		right: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 4.75px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}

dalston/style.css

@@ -4341,11 +4341,13 @@ a {
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		right: 16px;
 		z-index: 20000;
+		margin-right: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4368,9 +4370,10 @@ a {
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4382,15 +4385,6 @@ a {
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: left;
-		position: absolute;
-		right: 16px;
-		left: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 4.75px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}

hever/style-rtl.css

@@ -4512,11 +4512,13 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		left: 16px;
 		z-index: 20000;
+		margin-left: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4539,9 +4541,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4553,15 +4556,6 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: right;
-		position: absolute;
-		left: 16px;
-		right: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 5px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}

hever/style.css

@@ -4541,11 +4541,13 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		right: 16px;
 		z-index: 20000;
+		margin-right: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4568,9 +4570,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4582,15 +4585,6 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: left;
-		position: absolute;
-		right: 16px;
-		left: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 5px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}

mayland/sass/_extra-child-theme.scss

@@ -317,17 +317,9 @@ a {
 	.mobile-nav-side {
 		.site-header.has-menu {
 			.site-branding {
-				grid-area: site-logo;
-				justify-self: center;
-			}
-			.site-logo {
-				grid-area: unset;
-			}
-			&.has-title-and-tagline {
-				grid-template-areas: 
-					"site-logo site-logo" 
-					"social-navigation main-navigation";
+				display: contents;
 			}
+
 		}
 	}
-}
+}

mayland/style-rtl.css

@@ -4337,15 +4337,17 @@ strong {
 		margin: 0;
 		justify-self: end;
 		display: flex;
-		align-items: center;
+		align-items: flex-start;
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		left: 16px;
 		z-index: 20000;
+		margin-left: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4368,9 +4370,10 @@ strong {
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4382,15 +4385,6 @@ strong {
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: right;
-		position: absolute;
-		left: 16px;
-		right: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 5px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}
@@ -4419,13 +4413,6 @@ strong {
 
 @media only screen and (max-width: 559px) {
 	.mobile-nav-side .site-header.has-menu .site-branding {
-		grid-area: site-logo;
-		justify-self: center;
-	}
-	.mobile-nav-side .site-header.has-menu .site-logo {
-		grid-area: unset;
-	}
-	.mobile-nav-side .site-header.has-menu.has-title-and-tagline {
-		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+		display: contents;
 	}
 }

mayland/style.css

@@ -4366,15 +4366,17 @@ strong {
 		margin: 0;
 		justify-self: end;
 		display: flex;
-		align-items: center;
+		align-items: flex-start;
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		right: 16px;
 		z-index: 20000;
+		margin-right: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4397,9 +4399,10 @@ strong {
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4411,15 +4414,6 @@ strong {
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: left;
-		position: absolute;
-		right: 16px;
-		left: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 5px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}
@@ -4448,13 +4442,6 @@ strong {
 
 @media only screen and (max-width: 559px) {
 	.mobile-nav-side .site-header.has-menu .site-branding {
-		grid-area: site-logo;
-		justify-self: center;
-	}
-	.mobile-nav-side .site-header.has-menu .site-logo {
-		grid-area: unset;
-	}
-	.mobile-nav-side .site-header.has-menu.has-title-and-tagline {
-		grid-template-areas: "site-logo site-logo"  "social-navigation main-navigation";
+		display: contents;
 	}
 }

morden/sass/_extra-child-theme.scss

@@ -618,9 +618,10 @@ article .entry-header .entry-title,
 		#masthead .site-header-wrap > *:not(.site-logo) {
 			margin: 0;
 		}
+
 		.site-header #site-navigation.main-navigation {
+			.woocommerce-menu-container,
 			.main-menu-container {
-				margin: 0 (-2 * $baseline-unit);
 				background: #{map-deep-get($config-global, "color", "foreground", "default")};
 			}
 		}

morden/style-rtl.css

@@ -4605,11 +4605,13 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		left: 16px;
 		z-index: 20000;
+		margin-left: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4632,9 +4634,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4646,15 +4649,6 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: right;
-		position: absolute;
-		left: 16px;
-		right: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 5px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}
@@ -4685,8 +4679,8 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.mobile-nav-side #masthead .site-header-wrap > *:not(.site-logo) {
 		margin: 0;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
-		margin: 0 -16px;
 		background: #303030;
 	}
 }

morden/style.css

@@ -4634,11 +4634,13 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		right: 16px;
 		z-index: 20000;
+		margin-right: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4661,9 +4663,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4675,15 +4678,6 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: left;
-		position: absolute;
-		right: 16px;
-		left: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 5px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}
@@ -4714,8 +4708,8 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	.mobile-nav-side #masthead .site-header-wrap > *:not(.site-logo) {
 		margin: 0;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation .main-menu-container {
-		margin: 0 -16px;
 		background: #303030;
 	}
 }

rivington/style-rtl.css

@@ -4468,11 +4468,13 @@ p:not(.site-title) a:hover {
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		left: 16px;
 		z-index: 20000;
+		margin-left: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4495,9 +4497,10 @@ p:not(.site-title) a:hover {
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4509,15 +4512,6 @@ p:not(.site-title) a:hover {
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: right;
-		position: absolute;
-		left: 16px;
-		right: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 4.5px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}

rivington/style.css

@@ -4497,11 +4497,13 @@ p:not(.site-title) a:hover {
 		justify-content: end;
 		white-space: nowrap;
 	}
+	.mobile-nav-side .site-header #site-navigation.main-navigation #woocommerce-toggle:checked + label,
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle:checked + label {
 		position: fixed;
-		top: 16px;
+		top: 18px;
 		right: 16px;
 		z-index: 20000;
+		margin-right: 0;
 	}
 	.mobile-nav-side .site-header #site-navigation.main-navigation #toggle-menu {
 		order: 2;
@@ -4524,9 +4526,10 @@ p:not(.site-title) a:hover {
 	.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 .woocommerce-menu-container,
 	.mobile-nav-side .site-header #site-navigation.main-navigation > div {
 		grid-area: dropdown-menu;
-		margin-top: 8px;
+		margin-top: 16px;
 		position: fixed;
 		z-index: 100;
 		top: 0;
@@ -4538,15 +4541,6 @@ p:not(.site-title) a:hover {
 		overflow-y: auto;
 		white-space: normal;
 	}
-	.mobile-nav-side .site-header #site-navigation.main-navigation .woocommerce-menu-container {
-		text-align: left;
-		position: absolute;
-		right: 16px;
-		left: 16px;
-		width: calc(100% - 32px);
-		margin-top: 48px;
-		border-radius: 4.5px;
-	}
 	.mobile-nav-side.has-marketing-bar .site-header #site-navigation.main-navigation > div {
 		top: 45px;
 	}

varia/js/primary-navigation.js

@@ -1,7 +1,7 @@
 /**
  * File primary-navigation.js.
  *
- * Locks scroll when the menu is opened on mobile
+ * This files only gets added to themes that support the mobile nav on side
  */
 ( function() {
 
@@ -10,30 +10,27 @@
 	 *
 	 * @param {Element} element
 	 */
-	var navMenu = function ( id ){
-		var wrapper         = document.body; // this is the element to which a CSS class is added when a mobile nav menu is open
+	var navMenu = function ( buttonId, inputId ) {
+		var wrapper = document.body;
 
-			if (wrapper.classList.contains('mobile-nav-side')) {
+		var toggleButton = document.getElementById( buttonId );
+		var toggleInput  = document.getElementById( inputId );
 
-			var toggleButton    	= document.getElementById( 'toggle-menu' );
-			var toggleInput    	= document.getElementById( 'toggle' );
+		if ( toggleButton ) {
+			toggleButton.onclick = function() {
+				if ( true == toggleInput.checked ) {
+					wrapper.classList.remove( 'lock-scrolling' );
+				} else {
+					wrapper.classList.add( 'lock-scrolling' );
+				}
 
-			if ( toggleButton ){
-				toggleButton.onclick = function() {
-					if (toggleInput.checked == true){
-						wrapper.classList.remove( `${ id }-navigation-open` );
-						wrapper.classList.remove( 'lock-scrolling' );
-					} else {
-						wrapper.classList.add( `${ id }-navigation-open` );
-						wrapper.classList.add( 'lock-scrolling' );	
-					}
-					toggleButton.focus();
-				}		
+				toggleButton.focus();
 			}
 		}
 	}
 
 	window.addEventListener( 'load', function() {
-		new navMenu( 'primary' );
-	});
+		navMenu(  'toggle-menu', 'toggle' );
+		navMenu(  'toggle-cart', 'woocommerce-toggle' );
+	} );
 } )();

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

@@ -62,12 +62,14 @@ $wpadmin-bar--height: 46px;
 			justify-content: end;
 			white-space: nowrap;
 
+			#woocommerce-toggle,
 			#toggle {
 				&:checked + label{
 					position: fixed;
-					top: 2 * $baseline-unit;
+					top: 2 * $baseline-unit + 2px;
 					right: 2 * $baseline-unit;
 					z-index: 20000;
+					margin-right: 0;
 				}
 			}
 
@@ -94,10 +96,10 @@ $wpadmin-bar--height: 46px;
 			#toggle-cart[for="woocommerce-toggle"].button svg {
 				margin-top: -2px;
 			}
-
+			.woocommerce-menu-container,
 			& > div {
 				grid-area: dropdown-menu;
-				margin-top: $baseline-unit;
+				margin-top: 2 * $baseline-unit;
 				position: fixed;
 				z-index: 100;
 				top: 0;
@@ -110,14 +112,6 @@ $wpadmin-bar--height: 46px;
 				white-space: normal;
 			}
 
-			.woocommerce-menu-container {
-				text-align: left;
-				position: absolute;
-				right: 2 * $baseline-unit;
-				left: 2 * $baseline-unit;
-				width: calc(100% - 32px);
-				margin-top: 6 * $baseline-unit;
-			}
 		}
 		&.has-marketing-bar {
 			//Consider marketing bar height