Merge pull request #1642 from Automattic/fix/balasana-issue-1637

Balasana: Add a cleaner flex-box solution.

balasana/sass/style-child-theme-woocommerce.scss

@@ -43,20 +43,23 @@
 
 body[class*="woocommerce"] #page {
 
-	// Clean up mini-cart styles for mobile
+	// Clean up sit-branding, menu & mini-cart styles for mobile
 	@include media(mobile-only) {
 
 		#masthead {
 			position: relative;
-			display: inherit; // Remove flexbox to allot space for the mini-cart toggle
+			flex-wrap: wrap;
 
 			.site-branding {
+				margin-top: #{map-deep-get($config-global, "spacing", "unit")};
 				margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
 			}
 		}
 
 		#site-navigation {
 
+			margin-left: 0;
+
 			#toggle-menu,
 			#toggle-cart {
 				float: left;
@@ -90,7 +93,7 @@ body[class*="woocommerce"] #page {
 		}
 	}
 
-	// Clean up mini-cart styles for desktop
+	// Clean up mini-cart styles for mobile and up
 	@include media(mobile) {
 
 		.main-navigation {

balasana/style-woocommerce-rtl.css

@@ -2188,11 +2188,15 @@ body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-
 @media only screen and (max-width: 559px) {
 	body[class*="woocommerce"] #page #masthead {
 		position: relative;
-		display: inherit;
+		flex-wrap: wrap;
 	}
 	body[class*="woocommerce"] #page #masthead .site-branding {
+		margin-top: 16px;
 		margin-bottom: 16px;
 	}
+	body[class*="woocommerce"] #page #site-navigation {
+		margin-right: 0;
+	}
 	body[class*="woocommerce"] #page #site-navigation #toggle-menu,
 	body[class*="woocommerce"] #page #site-navigation #toggle-cart {
 		float: right;

balasana/style-woocommerce.css

@@ -2188,11 +2188,15 @@ body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-
 @media only screen and (max-width: 559px) {
 	body[class*="woocommerce"] #page #masthead {
 		position: relative;
-		display: inherit;
+		flex-wrap: wrap;
 	}
 	body[class*="woocommerce"] #page #masthead .site-branding {
+		margin-top: 16px;
 		margin-bottom: 16px;
 	}
+	body[class*="woocommerce"] #page #site-navigation {
+		margin-left: 0;
+	}
 	body[class*="woocommerce"] #page #site-navigation #toggle-menu,
 	body[class*="woocommerce"] #page #site-navigation #toggle-cart {
 		float: left;