Move the CSS changes to the SASS

seedlet/assets/css/style-navigation-rtl.css

@@ -15,6 +15,7 @@
 	.menu-button-container {
 		display: block;
 		margin: 0;
+		width: auto;
 	}
 }
 
@@ -46,6 +47,10 @@
 	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
+#site-navigation + .menu-button-container {
+	left: 0;
+}
+
 .menu-button-container .button,
 .primary-navigation .button,
 .woo-navigation .button {
@@ -136,12 +141,6 @@
 	overflow: hidden;
 }
 
-.primary-navigation-open .menu-button-container #primary-open-menu, .primary-navigation-open
-.primary-navigation #primary-open-menu, .primary-navigation-open
-.woo-navigation #primary-open-menu {
-	display: none;
-}
-
 .primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open
 .primary-navigation #primary-close-menu, .primary-navigation-open
 .woo-navigation #primary-close-menu {
@@ -151,12 +150,6 @@
 	margin-left: calc(0.25 * var(--global--spacing-unit));
 }
 
-.woo-navigation-open .menu-button-container #woo-open-menu, .woo-navigation-open
-.primary-navigation #woo-open-menu, .woo-navigation-open
-.woo-navigation #woo-open-menu {
-	display: none;
-}
-
 .woo-navigation-open .menu-button-container #woo-close-menu, .woo-navigation-open
 .primary-navigation #woo-close-menu, .woo-navigation-open
 .woo-navigation #woo-close-menu {
@@ -166,6 +159,18 @@
 	margin-left: calc(0.25 * var(--global--spacing-unit));
 }
 
+.woo-navigation-open .menu-button-container #primary-open-menu,
+.woo-navigation-open .menu-button-container #woo-open-menu,
+.primary-navigation-open .menu-button-container #primary-open-menu,
+.primary-navigation-open .menu-button-container #woo-open-menu {
+	display: none;
+}
+
+.woo-navigation-open .primary-navigation #primary-open-menu,
+.primary-navigation-open .primary-navigation #primary-open-menu {
+	display: none;
+}
+
 .primary-navigation,
 .woo-navigation {
 	position: absolute;

seedlet/assets/css/style-navigation.css

@@ -25,10 +25,6 @@
 	right: 0;
 }
 
-#site-navigation + .menu-button-container {
-    right: 0;
-}
-
 .menu-button-container #primary-open-menu {
 	margin-left: auto;
 	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
@@ -51,6 +47,10 @@
 	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 }
 
+#site-navigation + .menu-button-container {
+	right: 0;
+}
+
 .menu-button-container .button,
 .primary-navigation .button,
 .woo-navigation .button {
@@ -141,12 +141,6 @@
 	overflow: hidden;
 }
 
-.primary-navigation-open .menu-button-container #primary-open-menu,
-.primary-navigation-open .primary-navigation #primary-open-menu,
-.primary-navigation-open .menu-button-container #woo-open-menu {
-	display: none;
-}
-
 .primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open
 .primary-navigation #primary-close-menu, .primary-navigation-open
 .woo-navigation #primary-close-menu {
@@ -156,12 +150,6 @@
 	margin-right: calc(0.25 * var(--global--spacing-unit));
 }
 
-.woo-navigation-open .menu-button-container #primary-open-menu,
-.woo-navigation-open .primary-navigation #woo-open-menu,
-.woo-navigation-open .menu-button-container #woo-open-menu {
-	display: none;
-}
-
 .woo-navigation-open .menu-button-container #woo-close-menu, .woo-navigation-open
 .primary-navigation #woo-close-menu, .woo-navigation-open
 .woo-navigation #woo-close-menu {
@@ -171,6 +159,18 @@
 	margin-right: calc(0.25 * var(--global--spacing-unit));
 }
 
+.woo-navigation-open .menu-button-container #primary-open-menu,
+.woo-navigation-open .menu-button-container #woo-open-menu,
+.primary-navigation-open .menu-button-container #primary-open-menu,
+.primary-navigation-open .menu-button-container #woo-open-menu {
+	display: none;
+}
+
+.woo-navigation-open .primary-navigation #primary-open-menu,
+.primary-navigation-open .primary-navigation #primary-open-menu {
+	display: none;
+}
+
 .primary-navigation,
 .woo-navigation {
 	position: absolute;

seedlet/assets/sass/components/navigation/_style.scss

@@ -13,6 +13,7 @@
 	@include media( $navigation-max-break-point ){
 		display: block;
 		margin: 0;
+		width: auto;
 	}
 
 	// Adjust button postion when scrolling is locked
@@ -42,6 +43,10 @@
 	.admin-bar.has-marketing-bar:not(.primary-navigation-open) & {
 		top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
 	}
+
+	#site-navigation + & {
+		right: 0;
+	}
 }
 
 .menu-button-container,
@@ -112,9 +117,6 @@
 	}
 
 	.primary-navigation-open & {
-		#primary-open-menu {
-			display: none;
-		}
 		#primary-close-menu {
 			display: flex;
 			padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
@@ -123,9 +125,6 @@
 		}
 	}
 	.woo-navigation-open & {
-		#woo-open-menu {
-			display: none;
-		}
 		#woo-close-menu {
 			display: flex;
 			padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
@@ -135,6 +134,20 @@
 	}
 }
 
+.woo-navigation-open,
+.primary-navigation-open {
+	.menu-button-container {
+		#primary-open-menu,
+		#woo-open-menu {
+			display: none;
+		}
+	}
+
+	.primary-navigation #primary-open-menu {
+		display: none;
+	}
+}
+
 .primary-navigation,
 .woo-navigation {
 	position: absolute;