Balasana: Cleaning up mini-cart styles to work better with the Varia system.

balasana/sass/_extra-child-theme.scss

@@ -115,6 +115,108 @@ dt {
 	}
 }
 
+// Main Navigation
+.main-navigation {
+	margin: 0;
+	margin-left: auto;
+
+	& > div {
+		background: $color_background;
+		border: 1px solid $color_border;
+		border-radius: $border_radius_sm;
+		left: #{2* $spacing_horizontal};
+		margin-top: #{0.5 * $spacing_unit};
+		padding: 0 #{0.5 * $spacing_unit};
+		position: absolute;
+		right: #{2 * $spacing_horizontal};
+		z-index: 99;
+	}
+
+	li.current-menu-item > a {
+		font-weight: 700;
+	}
+
+	@include media(mobile) {
+		& > div {
+			background: transparent;
+			border: 0;
+			border-radius: 0;
+			left: auto;
+			margin-top: 0;
+			padding: 0;
+			position: inherit;
+			right: auto;
+			z-index: 1;
+		}
+
+		& > div > ul {
+			justify-content: flex-end;
+			margin-left: -#{0.5 * $spacing_horizontal};
+			margin-right: -#{0.5 * $spacing_horizontal};
+
+			& > li {
+				padding-left: $spacing_unit;
+				padding-right: $spacing_unit;
+				padding-top: $baseline-unit;
+				padding-bottom: $baseline-unit;
+
+				& > a {
+					padding: 0;
+				}
+			}
+
+			& > .menu-item-has-children > a::after {
+					border-left: #{0.25 * $spacing_unit} solid transparent;
+					border-right: #{0.25 * $spacing_unit} solid transparent;
+					border-top: #{0.25 * $spacing_unit} solid $color_primary;
+					content: "";
+					margin: 0;
+					margin-left: #{0.25 * $spacing_unit};
+					vertical-align: middle;
+			}
+		}
+
+		& > div > ul > li:hover,
+		& > div > ul > li.focus,
+		& > div > ul > li.current-menu-item {
+
+			& > ul {
+				border: 1px solid $color_border;
+				border-radius: $border_radius_sm;
+				box-shadow: none;
+				overflow: hidden;
+			}
+		}
+	}
+}
+
+// Toggle Menu
+#site-navigation #toggle-menu {
+	align-items: center;
+	display: flex;
+	padding: #{0.5 * $spacing_unit} $spacing_unit;
+
+	&::before {
+		content: "";
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
+		display: block;
+		height: 24px;
+		margin: 0;
+		margin-right: #{0.25 * $spacing_unit};
+		width: 24px;
+	}
+
+	@include media(mobile) {
+		display: none;
+	}
+}
+
+#site-navigation #toggle:checked + #toggle-menu {
+	&::before {
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'%3E%3C/path%3E%3C/svg%3E");
+	}
+}
+
 /**
  * Footer
  */

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

@@ -41,16 +41,61 @@
 @import "../../varia/sass/vendors/woocommerce/style";
 
 @include media(mobile-only) {
-	body[class*="woocommerce"] #page .main-navigation {
-//		display: flex;
-//		align-items: flex-start;
-	}
 
-	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container {
-		width: inherit;
-	}
+	body[class*="woocommerce"] #page {
+		#masthead {
+			position: relative;
+
+			.site-branding {
+				margin-bottom: #{map-deep-get($config-global, "spacing", "unit")};
+			}
+		}
+
+		#site-navigation {
 
-	body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
-		padding: map-deep-get($config-global, "spacing", "unit");
+			#toggle-menu,
+			#toggle-cart {
+				float: left;
+			}
+
+			#toggle-cart {
+				margin-left: #{map-deep-get($config-global, "spacing", "unit")};
+			}
+
+			& > div {
+				left: #{map-deep-get($config-global, "spacing", "unit")};
+				right: #{map-deep-get($config-global, "spacing", "unit")};
+				top: calc(100% - #{map-deep-get($config-global, "spacing", "unit")};
+				width: calc(100vw - #{2 * map-deep-get($config-global, "spacing", "unit")});
+			}
+
+			.woocommerce-cart-widget {
+				padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
+			}
+		}
 	}
 }
+
+@include media(mobile) {
+
+	body[class*="woocommerce"] #page {
+
+		.main-navigation {
+
+			text-align: right;
+
+			ul {
+				text-align: left;
+				justify-content: flex-end;
+			}
+
+			& > div:not(:last-of-type) {
+				margin-right: 0;
+			}
+
+			& > div:last-of-type {
+				margin-left: (2 * map-deep-get($config-global, "spacing", "horizontal"));
+			}
+		}
+	}
+}

balasana/style-rtl.css

@@ -3709,6 +3709,14 @@ dt {
 /**
  * Header
  */
+@media only screen and (min-width: 560px) {
+	.site-header {
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+	}
+}
+
 .site-header > * {
 	margin-top: 0;
 	margin-bottom: 0;
@@ -3742,6 +3750,98 @@ dt {
 	}
 }
 
+.main-navigation {
+	margin: 0;
+	margin-right: auto;
+}
+
+.main-navigation > div {
+	background: white;
+	border: 1px solid #D0D0D0;
+	border-radius: 4px;
+	right: 32px;
+	margin-top: 8px;
+	padding: 0 8px;
+	position: absolute;
+	left: 32px;
+	z-index: 99;
+}
+
+.main-navigation li.current-menu-item > a {
+	font-weight: 700;
+}
+
+@media only screen and (min-width: 560px) {
+	.main-navigation > div {
+		background: transparent;
+		border: 0;
+		border-radius: 0;
+		right: auto;
+		margin-top: 0;
+		padding: 0;
+		position: inherit;
+		left: auto;
+		z-index: 1;
+	}
+	.main-navigation > div > ul {
+		justify-content: flex-end;
+		margin-right: -8px;
+		margin-left: -8px;
+	}
+	.main-navigation > div > ul > li {
+		padding-right: 16px;
+		padding-left: 16px;
+		padding-top: 8px;
+		padding-bottom: 8px;
+	}
+	.main-navigation > div > ul > li > a {
+		padding: 0;
+	}
+	.main-navigation > div > ul > .menu-item-has-children > a::after {
+		border-right: 4px solid transparent;
+		border-left: 4px solid transparent;
+		border-top: 4px solid #19744C;
+		content: "";
+		margin: 0;
+		margin-right: 4px;
+		vertical-align: middle;
+	}
+	.main-navigation > div > ul > li:hover > ul,
+	.main-navigation > div > ul > li.focus > ul,
+	.main-navigation > div > ul > li.current-menu-item > ul {
+		border: 1px solid #D0D0D0;
+		border-radius: 4px;
+		box-shadow: none;
+		overflow: hidden;
+	}
+}
+
+#site-navigation #toggle-menu {
+	align-items: center;
+	display: flex;
+	padding: 8px 16px;
+}
+
+#site-navigation #toggle-menu::before {
+	content: "";
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
+	display: block;
+	height: 24px;
+	margin: 0;
+	margin-left: 4px;
+	width: 24px;
+}
+
+@media only screen and (min-width: 560px) {
+	#site-navigation #toggle-menu {
+		display: none;
+	}
+}
+
+#site-navigation #toggle:checked + #toggle-menu::before {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'%3E%3C/path%3E%3C/svg%3E");
+}
+
 /**
  * Footer
  */

balasana/style-woocommerce-rtl.css

@@ -2186,10 +2186,39 @@ body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-
 }
 
 @media only screen and (max-width: 559px) {
-	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container {
-		width: inherit;
+	body[class*="woocommerce"] #page #masthead {
+		position: relative;
 	}
-	body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
-		padding: 16px;
+	body[class*="woocommerce"] #page #site-navigation #toggle-menu,
+	body[class*="woocommerce"] #page #site-navigation #toggle-cart {
+		float: right;
+	}
+	body[class*="woocommerce"] #page #site-navigation #toggle-cart {
+		margin-right: 16px;
+	}
+	body[class*="woocommerce"] #page #site-navigation > div {
+		right: 16px;
+		left: 16px;
+		top: calc(100% - 16px);
+		width: calc(100vw - 32px);
+	}
+	body[class*="woocommerce"] #page #site-navigation .woocommerce-cart-widget {
+		padding: 8px;
+	}
+}
+
+@media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page .main-navigation {
+		text-align: left;
+	}
+	body[class*="woocommerce"] #page .main-navigation ul {
+		text-align: right;
+		justify-content: flex-end;
+	}
+	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: 32px;
 	}
 }

balasana/style-woocommerce.css

@@ -2186,10 +2186,42 @@ body[class*="woocommerce"] #page .widget_price_filter .price_slider_wrapper .ui-
 }
 
 @media only screen and (max-width: 559px) {
-	body[class*="woocommerce"] #page .main-navigation .woocommerce-menu-container {
-		width: inherit;
+	body[class*="woocommerce"] #page #masthead {
+		position: relative;
 	}
-	body[class*="woocommerce"] #page .main-navigation .woocommerce-cart-widget {
-		padding: 16px;
+	body[class*="woocommerce"] #page #masthead .site-branding {
+		margin-bottom: 16px;
+	}
+	body[class*="woocommerce"] #page #site-navigation #toggle-menu,
+	body[class*="woocommerce"] #page #site-navigation #toggle-cart {
+		float: left;
+	}
+	body[class*="woocommerce"] #page #site-navigation #toggle-cart {
+		margin-left: 16px;
+	}
+	body[class*="woocommerce"] #page #site-navigation > div {
+		left: 16px;
+		right: 16px;
+		top: calc(100% - 16px);
+		width: calc(100vw - 32px);
+	}
+	body[class*="woocommerce"] #page #site-navigation .woocommerce-cart-widget {
+		padding: 8px;
+	}
+}
+
+@media only screen and (min-width: 560px) {
+	body[class*="woocommerce"] #page .main-navigation {
+		text-align: right;
+	}
+	body[class*="woocommerce"] #page .main-navigation ul {
+		text-align: left;
+		justify-content: flex-end;
+	}
+	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: 32px;
 	}
 }

balasana/style.css

@@ -3779,6 +3779,98 @@ dt {
 	}
 }
 
+.main-navigation {
+	margin: 0;
+	margin-left: auto;
+}
+
+.main-navigation > div {
+	background: white;
+	border: 1px solid #D0D0D0;
+	border-radius: 4px;
+	left: 32px;
+	margin-top: 8px;
+	padding: 0 8px;
+	position: absolute;
+	right: 32px;
+	z-index: 99;
+}
+
+.main-navigation li.current-menu-item > a {
+	font-weight: 700;
+}
+
+@media only screen and (min-width: 560px) {
+	.main-navigation > div {
+		background: transparent;
+		border: 0;
+		border-radius: 0;
+		left: auto;
+		margin-top: 0;
+		padding: 0;
+		position: inherit;
+		right: auto;
+		z-index: 1;
+	}
+	.main-navigation > div > ul {
+		justify-content: flex-end;
+		margin-left: -8px;
+		margin-right: -8px;
+	}
+	.main-navigation > div > ul > li {
+		padding-left: 16px;
+		padding-right: 16px;
+		padding-top: 8px;
+		padding-bottom: 8px;
+	}
+	.main-navigation > div > ul > li > a {
+		padding: 0;
+	}
+	.main-navigation > div > ul > .menu-item-has-children > a::after {
+		border-left: 4px solid transparent;
+		border-right: 4px solid transparent;
+		border-top: 4px solid #19744C;
+		content: "";
+		margin: 0;
+		margin-left: 4px;
+		vertical-align: middle;
+	}
+	.main-navigation > div > ul > li:hover > ul,
+	.main-navigation > div > ul > li.focus > ul,
+	.main-navigation > div > ul > li.current-menu-item > ul {
+		border: 1px solid #D0D0D0;
+		border-radius: 4px;
+		box-shadow: none;
+		overflow: hidden;
+	}
+}
+
+#site-navigation #toggle-menu {
+	align-items: center;
+	display: flex;
+	padding: 8px 16px;
+}
+
+#site-navigation #toggle-menu::before {
+	content: "";
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E");
+	display: block;
+	height: 24px;
+	margin: 0;
+	margin-right: 4px;
+	width: 24px;
+}
+
+@media only screen and (min-width: 560px) {
+	#site-navigation #toggle-menu {
+		display: none;
+	}
+}
+
+#site-navigation #toggle:checked + #toggle-menu::before {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'%3E%3C/path%3E%3C/svg%3E");
+}
+
 /**
  * Footer
  */