Brompton: Cleaning up mini-cart positioning.

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

@@ -40,17 +40,68 @@
  */
 @import "../../varia/sass/vendors/woocommerce/style";
 
+
 body[class*="woocommerce"] #page {
+
+	// Fix menu mini-cart alignment
+	#masthead .main-navigation {
+		text-align: center;
+	}
+
+	// Fix mini-cart borders
 	.main-navigation > div > ul > li:hover ul.cart_list li > a,
 	.main-navigation > div > ul > li.focus ul.cart_list li > a,
 	.main-navigation > div > ul > li.current-menu-item ul.cart_list li > a {
 		border-top: none;
 	}
-}
 
-@include media(mobile) {
-	body[class*="woocommerce"] #page .main-navigation > div > ul > li.woocommerce-menu-item > .sub-menu {
-		right: auto;
-		left: 0;
+	@include media(mobile) {
+
+		// Fix menu mini-cart alignment
+		#masthead .main-navigation {
+			text-align: center;
+		}
+
+		// Clean up mini-cart positioning
+		.main-navigation > div > ul > li.woocommerce-menu-item > .sub-menu {
+			right: auto;
+			left: 0;
+		}
+
+		// Clean up mini-cart styles for desktop
+		.main-navigation {
+
+			& > div:not(:last-of-type) {
+				margin-right: 0;
+			}
+
+			& > div:last-of-type {
+				margin-left: 0;
+			}
+		}
+	}
+
+	@include media(tablet) {
+
+		// Fix menu mini-cart alignment
+		#masthead .main-navigation {
+			text-align: center;
+		}
+	}
+
+	@include media(laptop) {
+
+		// Fix menu mini-cart alignment
+		#masthead .main-navigation {
+			text-align: left;
+		}
+	}
+
+	@include media(desktop) {
+
+		// Fix menu mini-cart alignment
+		#masthead .main-navigation {
+			text-align: left;
+		}
 	}
 }

brompton/style-rtl.css

@@ -2473,6 +2473,11 @@ body:not(.fse-enabled) .site-description {
 	z-index: 1;
 }
 
+.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
+	cursor: pointer;
+	z-index: 99999;
+}
+
 .main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
 	cursor: pointer;
 	z-index: 99999;
@@ -2485,6 +2490,14 @@ body:not(.fse-enabled) .site-description {
 		/* Submenu display */
 	}
 	.main-navigation > div > ul li:hover > ul,
+	.main-navigation > div > ul li[focus-within] > ul,
+	.main-navigation > div > ul li ul:hover,
+	.main-navigation > div > ul li ul:focus {
+		visibility: visible;
+		opacity: 1;
+		display: block;
+	}
+	.main-navigation > div > ul li:hover > ul,
 	.main-navigation > div > ul li:focus-within > ul,
 	.main-navigation > div > ul li ul:hover,
 	.main-navigation > div > ul li ul:focus {

brompton/style-woocommerce-rtl.css

@@ -2185,6 +2185,10 @@ body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-
 	}
 }
 
+body[class*="woocommerce"] #page #masthead .main-navigation {
+	text-align: center;
+}
+
 body[class*="woocommerce"] #page .main-navigation > div > ul > li:hover ul.cart_list li > a,
 body[class*="woocommerce"] #page .main-navigation > div > ul > li.focus ul.cart_list li > a,
 body[class*="woocommerce"] #page .main-navigation > div > ul > li.current-menu-item ul.cart_list li > a {
@@ -2192,8 +2196,35 @@ body[class*="woocommerce"] #page .main-navigation > div > ul > li.current-menu-i
 }
 
 @media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page #masthead .main-navigation {
+		text-align: center;
+	}
 	body[class*="woocommerce"] #page .main-navigation > div > ul > li.woocommerce-menu-item > .sub-menu {
 		left: auto;
 		right: 0;
 	}
+	body[class*="woocommerce"] #page .main-navigation > div:not(:last-of-type) {
+		margin-left: 0;
+	}
+	body[class*="woocommerce"] #page .main-navigation > div:last-of-type {
+		margin-right: 0;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	body[class*="woocommerce"] #page #masthead .main-navigation {
+		text-align: center;
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	body[class*="woocommerce"] #page #masthead .main-navigation {
+		text-align: right;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	body[class*="woocommerce"] #page #masthead .main-navigation {
+		text-align: right;
+	}
 }

brompton/style-woocommerce.css

@@ -2185,6 +2185,10 @@ body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-
 	}
 }
 
+body[class*="woocommerce"] #page #masthead .main-navigation {
+	text-align: center;
+}
+
 body[class*="woocommerce"] #page .main-navigation > div > ul > li:hover ul.cart_list li > a,
 body[class*="woocommerce"] #page .main-navigation > div > ul > li.focus ul.cart_list li > a,
 body[class*="woocommerce"] #page .main-navigation > div > ul > li.current-menu-item ul.cart_list li > a {
@@ -2192,8 +2196,35 @@ body[class*="woocommerce"] #page .main-navigation > div > ul > li.current-menu-i
 }
 
 @media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page #masthead .main-navigation {
+		text-align: center;
+	}
 	body[class*="woocommerce"] #page .main-navigation > div > ul > li.woocommerce-menu-item > .sub-menu {
 		right: auto;
 		left: 0;
 	}
+	body[class*="woocommerce"] #page .main-navigation > div:not(:last-of-type) {
+		margin-right: 0;
+	}
+	body[class*="woocommerce"] #page .main-navigation > div:last-of-type {
+		margin-left: 0;
+	}
+}
+
+@media only screen and (min-width: 640px) {
+	body[class*="woocommerce"] #page #masthead .main-navigation {
+		text-align: center;
+	}
+}
+
+@media only screen and (min-width: 782px) {
+	body[class*="woocommerce"] #page #masthead .main-navigation {
+		text-align: left;
+	}
+}
+
+@media only screen and (min-width: 1024px) {
+	body[class*="woocommerce"] #page #masthead .main-navigation {
+		text-align: left;
+	}
 }