Merge pull request #2746 from Automattic/add/spearhead-cart-menu

Spearhead: position the shopping cart on the menu

spearhead/assets/sass/_header.scss

@@ -1,15 +1,16 @@
 $admin-bar-height: 46px;
 $site-branding-height: 68px;
 
-.has-main-navigation {
+.has-main-navigation { // to override seedlet
 	.site-header {
-		padding: var(--global--spacing-horizontal);
-		a {
-			border-bottom: 1px solid transparent;
-		}
+		padding: var(--global--spacing-vertical) 0;
 
 		@include media( laptop ){
-			padding: 35px var(--global--spacing-horizontal);
+			padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
+		}
+
+		a {
+			border-bottom: 1px solid transparent;
 		}
 
 		@include media( laptop-only ){
@@ -29,24 +30,38 @@ $site-branding-height: 68px;
 }
 
 .site-header {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
+	display: grid;
+	grid-template-areas:
+		"site-logo site-logo site-logo"
+		"branding branding primary-navigation";
+	grid-template-columns: 0.5fr 1fr 0.5fr;
+	grid-template-rows: auto;
+	grid-column-gap: 16px;
 	max-width: var(--responsive--alignfull-width);
-	padding: var(--global--spacing-horizontal);
+	padding: var(--global--spacing-vertical) 0;
 
 	@include media( laptop ){
-		padding: 35px var(--global--spacing-horizontal);
-	}
-
-	@include media( laptop-only ){
-		flex-wrap: wrap;
+		grid-template-areas:
+			"site-logo site-logo site-logo"
+			"branding primary-navigation primary-navigation";
+		padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
 	}
 
 	.site-branding {
-		flex-basis: 30%;
-		flex-grow: 1;
+		grid-area: branding;
+		padding: var(--global--spacing-horizontal);
 		text-align: left;
+		justify-self: flex-start;
+		align-self: center;
+
+		@include media( laptop ){
+			padding: 0;
+		}
+
+		.site-logo {
+			margin-left: 0;
+			margin-top: 0;
+		}
 
 		.site-title {
 			margin-bottom: 4px;
@@ -56,23 +71,28 @@ $site-branding-height: 68px;
 				text-shadow: none;
 			}
 		}
+	}
 
-		.site-logo {
-			margin-left: 0;
-			margin-top: 0;
-			text-align: left;
+	.site-logo {
+		grid-area: site-logo;
+		margin: 0;
+
+		a {
+			display: block;
+
+			&:hover {
+				border-color: transparent;
+			}
 		}
 	}
 
+	.primary-navigation-wrapper {
+		margin-bottom: 6px;
+	}
+
 	.primary-navigation {
-		flex-basis: 70%;
-		flex-grow: 4;
 		margin-top: 0;
 
-		.primary-menu-container {
-			margin-bottom: 6px;
-		}
-
 		@include media( laptop-only ){ // TODO - use $navigation-max-break-point variable
 			.primary-menu-container {
 				.admin-bar & {
@@ -167,27 +187,43 @@ $site-branding-height: 68px;
 	}
 }
 
-.has-title-and-tagline .site-logo {
-	flex-basis: 100%;
-	margin-bottom: var(--global--spacing-vertical);
-}
+.has-title-and-tagline {
+	.site-logo {
+		margin: 0;
 
-.primary-navigation-open .has-title-and-tagline .site-logo {
-	display: none;
+		@include media( laptop ){
+			padding-bottom: var(--global--spacing-vertical);
+		}
+	}
+	.site-branding {
+		align-self: flex-start;
+	}
 }
 
+.primary-navigation-open {
+	.site-header {
+		padding-top: 0;
+	}
+
+	.has-title-and-tagline .site-logo {
+		display: none;
+	}
+}
 
 .site-header div.menu-button-container {
 	button#primary-open-menu {
+		padding: var(--global--spacing-horizontal);
 		margin-top: 0;
 		margin-right: 0;
-		padding: var(--global--spacing-horizontal);
-
 		&:before {
 			margin: 0;
 		}
 	}
 
+	#woo-open-menu {
+		margin-left: auto;
+	}
+
 	.primary-navigation-open & {
 		margin: 0;
 	}

spearhead/assets/sass/_woocommerce.scss

@@ -20,6 +20,10 @@ body[class*="woocommerce"] #page {
 			}
 		}
 	}
+
+	.woo-navigation .woocommerce-cart-widget {
+		max-width: 100%;
+	}
 }
 
 #woocommerce-wrapper {
@@ -31,3 +35,9 @@ body[class*="woocommerce"] #page {
 		}
 	}
 }
+
+@include media( laptop ){
+	.woo-navigation {
+		padding-top: var(--global--spacing-vertical);
+	}
+}

spearhead/assets/sass/navigation.scss

@@ -9,6 +9,11 @@ $navigation-max-break-point: 'laptop-only';
 
 @import "../../../seedlet/assets/sass/components/navigation/style";
 
+.navigation-wrapper {
+	grid-area: primary-navigation;
+	margin: 0;
+}
+
 .primary-navigation,
 .woo-navigation {
 	// Top-level Menu Item
@@ -40,13 +45,16 @@ $navigation-max-break-point: 'laptop-only';
 	}
 }
 
+.woo-navigation {
+	padding-left: calc(2 * var(--primary-nav--padding));
+}
+
 .social-navigation > div {
 	ul li {
 		width: auto;
 	}
 }
 
-
 $header-height: 80px;
 div.extra-navigation-wrapper {
 	@include media( $navigation-max-break-point ) {
@@ -82,10 +90,20 @@ div.extra-navigation-wrapper {
 	}
 }
 
-.has-logo.has-title-and-tagline .menu-button-container {
-	top: calc( var(--branding--logo--max-height) + var(--global--spacing-vertical) );
+.menu-button-container {
+	position: relative;
+	left: unset;
+	top: unset;
+
+	.button#woo-open-menu {
+		margin-top: 0;
+	}
 
-	.admin-bar & {
-		top: calc( var(--wpadmin-bar--height) + var(--branding--logo--max-height) + var(--global--spacing-vertical) );
+	.admin-bar:not(.primary-navigation-open) & {
+		top: unset;
 	}
 }
+
+.social-navigation {
+	grid-area: navigation;
+}

spearhead/navigation-rtl.css

@@ -529,6 +529,11 @@
 	}
 }
 
+.navigation-wrapper {
+	grid-area: primary-navigation;
+	margin: 0;
+}
+
 .primary-navigation .primary-menu-container > ul > .menu-item,
 .woo-navigation .primary-menu-container > ul > .menu-item {
 	padding: 0;
@@ -560,6 +565,10 @@
 	}
 }
 
+.woo-navigation {
+	padding-right: calc(2 * var(--primary-nav--padding));
+}
+
 .social-navigation > div ul li {
 	width: auto;
 }
@@ -595,10 +604,20 @@
 	bottom: calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) ));
 }
 
-.has-logo.has-title-and-tagline .menu-button-container {
-	top: calc( var(--branding--logo--max-height) + var(--global--spacing-vertical));
+.menu-button-container {
+	position: relative;
+	right: unset;
+	top: unset;
+}
+
+.menu-button-container .button#woo-open-menu {
+	margin-top: 0;
+}
+
+.admin-bar:not(.primary-navigation-open) .menu-button-container {
+	top: unset;
 }
 
-.admin-bar .has-logo.has-title-and-tagline .menu-button-container {
-	top: calc( var(--wpadmin-bar--height) + var(--branding--logo--max-height) + var(--global--spacing-vertical));
+.social-navigation {
+	grid-area: navigation;
 }

spearhead/navigation.css

@@ -529,6 +529,11 @@
 	}
 }
 
+.navigation-wrapper {
+	grid-area: primary-navigation;
+	margin: 0;
+}
+
 .primary-navigation .primary-menu-container > ul > .menu-item,
 .woo-navigation .primary-menu-container > ul > .menu-item {
 	padding: 0;
@@ -560,6 +565,10 @@
 	}
 }
 
+.woo-navigation {
+	padding-left: calc(2 * var(--primary-nav--padding));
+}
+
 .social-navigation > div ul li {
 	width: auto;
 }
@@ -595,12 +604,22 @@
 	bottom: calc( var(--branding--logo--max-height) + ( 2 * var(--global--spacing-vertical) ));
 }
 
-.has-logo.has-title-and-tagline .menu-button-container {
-	top: calc( var(--branding--logo--max-height) + var(--global--spacing-vertical));
+.menu-button-container {
+	position: relative;
+	left: unset;
+	top: unset;
+}
+
+.menu-button-container .button#woo-open-menu {
+	margin-top: 0;
+}
+
+.admin-bar:not(.primary-navigation-open) .menu-button-container {
+	top: unset;
 }
 
-.admin-bar .has-logo.has-title-and-tagline .menu-button-container {
-	top: calc( var(--wpadmin-bar--height) + var(--branding--logo--max-height) + var(--global--spacing-vertical));
+.social-navigation {
+	grid-area: navigation;
 }
 
 /*# sourceMappingURL=navigation.css.map */

spearhead/style-rtl.css

@@ -214,19 +214,19 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-main-navigation .site-header {
-	padding: var(--global--spacing-horizontal);
-}
-
-.has-main-navigation .site-header a {
-	border-bottom: 1px solid transparent;
+	padding: var(--global--spacing-vertical) 0;
 }
 
 @media only screen and (min-width: 830px) {
 	.has-main-navigation .site-header {
-		padding: 35px var(--global--spacing-horizontal);
+		padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
 	}
 }
 
+.has-main-navigation .site-header a {
+	border-bottom: 1px solid transparent;
+}
+
 @media only screen and (max-width: 829px) {
 	.has-main-navigation .site-header .site-title {
 		margin: 0;
@@ -241,29 +241,39 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
+	display: grid;
+	grid-template-areas: "site-logo site-logo site-logo" "branding branding primary-navigation";
+	grid-template-columns: 0.5fr 1fr 0.5fr;
+	grid-template-rows: auto;
+	grid-column-gap: 16px;
 	max-width: var(--responsive--alignfull-width);
-	padding: var(--global--spacing-horizontal);
+	padding: var(--global--spacing-vertical) 0;
 }
 
 @media only screen and (min-width: 830px) {
 	.site-header {
-		padding: 35px var(--global--spacing-horizontal);
+		grid-template-areas: "site-logo site-logo site-logo" "branding primary-navigation primary-navigation";
+		padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
 	}
 }
 
-@media only screen and (max-width: 829px) {
-	.site-header {
-		flex-wrap: wrap;
+.site-header .site-branding {
+	grid-area: branding;
+	padding: var(--global--spacing-horizontal);
+	text-align: right;
+	justify-self: flex-start;
+	align-self: center;
+}
+
+@media only screen and (min-width: 830px) {
+	.site-header .site-branding {
+		padding: 0;
 	}
 }
 
-.site-header .site-branding {
-	flex-basis: 30%;
-	flex-grow: 1;
-	text-align: right;
+.site-header .site-branding .site-logo {
+	margin-right: 0;
+	margin-top: 0;
 }
 
 .site-header .site-branding .site-title {
@@ -275,22 +285,27 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-shadow: none;
 }
 
-.site-header .site-branding .site-logo {
-	margin-right: 0;
-	margin-top: 0;
-	text-align: right;
+.site-header .site-logo {
+	grid-area: site-logo;
+	margin: 0;
 }
 
-.site-header .primary-navigation {
-	flex-basis: 70%;
-	flex-grow: 4;
-	margin-top: 0;
+.site-header .site-logo a {
+	display: block;
+}
+
+.site-header .site-logo a:hover {
+	border-color: transparent;
 }
 
-.site-header .primary-navigation .primary-menu-container {
+.site-header .primary-navigation-wrapper {
 	margin-bottom: 6px;
 }
 
+.site-header .primary-navigation {
+	margin-top: 0;
+}
+
 @media only screen and (max-width: 829px) {
 	.admin-bar .site-header .primary-navigation .primary-menu-container {
 		top: 114px;
@@ -380,8 +395,21 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-title-and-tagline .site-logo {
-	flex-basis: 100%;
-	margin-bottom: var(--global--spacing-vertical);
+	margin: 0;
+}
+
+@media only screen and (min-width: 830px) {
+	.has-title-and-tagline .site-logo {
+		padding-bottom: var(--global--spacing-vertical);
+	}
+}
+
+.has-title-and-tagline .site-branding {
+	align-self: flex-start;
+}
+
+.primary-navigation-open .site-header {
+	padding-top: 0;
 }
 
 .primary-navigation-open .has-title-and-tagline .site-logo {
@@ -389,15 +417,19 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header div.menu-button-container button#primary-open-menu {
+	padding: var(--global--spacing-horizontal);
 	margin-top: 0;
 	margin-left: 0;
-	padding: var(--global--spacing-horizontal);
 }
 
 .site-header div.menu-button-container button#primary-open-menu:before {
 	margin: 0;
 }
 
+.site-header div.menu-button-container #woo-open-menu {
+	margin-right: auto;
+}
+
 .primary-navigation-open .site-header div.menu-button-container {
 	margin: 0;
 }
@@ -810,6 +842,16 @@ body[class*="woocommerce"] #page span.onsale {
 	}
 }
 
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
+	max-width: 100%;
+}
+
 #woocommerce-wrapper ul.products li.product .price {
 	color: var(--global--color-foreground);
+}
+
+@media only screen and (min-width: 830px) {
+	.woo-navigation {
+		padding-top: var(--global--spacing-vertical);
+	}
 }

spearhead/style.css

@@ -214,19 +214,19 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-main-navigation .site-header {
-	padding: var(--global--spacing-horizontal);
-}
-
-.has-main-navigation .site-header a {
-	border-bottom: 1px solid transparent;
+	padding: var(--global--spacing-vertical) 0;
 }
 
 @media only screen and (min-width: 830px) {
 	.has-main-navigation .site-header {
-		padding: 35px var(--global--spacing-horizontal);
+		padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
 	}
 }
 
+.has-main-navigation .site-header a {
+	border-bottom: 1px solid transparent;
+}
+
 @media only screen and (max-width: 829px) {
 	.has-main-navigation .site-header .site-title {
 		margin: 0;
@@ -241,29 +241,39 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
+	display: grid;
+	grid-template-areas: "site-logo site-logo site-logo" "branding branding primary-navigation";
+	grid-template-columns: 0.5fr 1fr 0.5fr;
+	grid-template-rows: auto;
+	grid-column-gap: 16px;
 	max-width: var(--responsive--alignfull-width);
-	padding: var(--global--spacing-horizontal);
+	padding: var(--global--spacing-vertical) 0;
 }
 
 @media only screen and (min-width: 830px) {
 	.site-header {
-		padding: 35px var(--global--spacing-horizontal);
+		grid-template-areas: "site-logo site-logo site-logo" "branding primary-navigation primary-navigation";
+		padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
 	}
 }
 
-@media only screen and (max-width: 829px) {
-	.site-header {
-		flex-wrap: wrap;
+.site-header .site-branding {
+	grid-area: branding;
+	padding: var(--global--spacing-horizontal);
+	text-align: left;
+	justify-self: flex-start;
+	align-self: center;
+}
+
+@media only screen and (min-width: 830px) {
+	.site-header .site-branding {
+		padding: 0;
 	}
 }
 
-.site-header .site-branding {
-	flex-basis: 30%;
-	flex-grow: 1;
-	text-align: left;
+.site-header .site-branding .site-logo {
+	margin-left: 0;
+	margin-top: 0;
 }
 
 .site-header .site-branding .site-title {
@@ -275,22 +285,27 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	text-shadow: none;
 }
 
-.site-header .site-branding .site-logo {
-	margin-left: 0;
-	margin-top: 0;
-	text-align: left;
+.site-header .site-logo {
+	grid-area: site-logo;
+	margin: 0;
 }
 
-.site-header .primary-navigation {
-	flex-basis: 70%;
-	flex-grow: 4;
-	margin-top: 0;
+.site-header .site-logo a {
+	display: block;
+}
+
+.site-header .site-logo a:hover {
+	border-color: transparent;
 }
 
-.site-header .primary-navigation .primary-menu-container {
+.site-header .primary-navigation-wrapper {
 	margin-bottom: 6px;
 }
 
+.site-header .primary-navigation {
+	margin-top: 0;
+}
+
 @media only screen and (max-width: 829px) {
 	.admin-bar .site-header .primary-navigation .primary-menu-container {
 		top: 114px;
@@ -380,8 +395,21 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-title-and-tagline .site-logo {
-	flex-basis: 100%;
-	margin-bottom: var(--global--spacing-vertical);
+	margin: 0;
+}
+
+@media only screen and (min-width: 830px) {
+	.has-title-and-tagline .site-logo {
+		padding-bottom: var(--global--spacing-vertical);
+	}
+}
+
+.has-title-and-tagline .site-branding {
+	align-self: flex-start;
+}
+
+.primary-navigation-open .site-header {
+	padding-top: 0;
 }
 
 .primary-navigation-open .has-title-and-tagline .site-logo {
@@ -389,15 +417,19 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header div.menu-button-container button#primary-open-menu {
+	padding: var(--global--spacing-horizontal);
 	margin-top: 0;
 	margin-right: 0;
-	padding: var(--global--spacing-horizontal);
 }
 
 .site-header div.menu-button-container button#primary-open-menu:before {
 	margin: 0;
 }
 
+.site-header div.menu-button-container #woo-open-menu {
+	margin-left: auto;
+}
+
 .primary-navigation-open .site-header div.menu-button-container {
 	margin: 0;
 }
@@ -810,8 +842,18 @@ body[class*="woocommerce"] #page span.onsale {
 	}
 }
 
+body[class*="woocommerce"] #page .woo-navigation .woocommerce-cart-widget {
+	max-width: 100%;
+}
+
 #woocommerce-wrapper ul.products li.product .price {
 	color: var(--global--color-foreground);
 }
 
+@media only screen and (min-width: 830px) {
+	.woo-navigation {
+		padding-top: var(--global--spacing-vertical);
+	}
+}
+
 /*# sourceMappingURL=style.css.map */

spearhead/template-parts/header/navigation.php

@@ -1,89 +1,91 @@
-<?php $has_primary_nav = has_nav_menu( 'primary' );
+<div class="navigation-wrapper">
+	<?php $has_primary_nav = has_nav_menu( 'primary' );
 	if ( $has_primary_nav || has_nav_menu( 'social' ) ) : ?>
-	<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Main', 'spearhead' ); ?>">
-		<button id="primary-close-menu" class="button close">
-			<span class="dropdown-icon close"><?php _e( 'Close', 'spearhead' ); ?> <?php echo seedlet_get_icon_svg( 'close' ); ?></span>
-			<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'spearhead' ); ?></span>
-		</button>
-		<div class="extra-navigation-wrapper">
-			<?php
-			if ( $has_primary_nav ) :
-				// Get menu slug
-				$location_name = 'primary';
-				$locations     = get_nav_menu_locations();
-				$menu_id       = $locations[ $location_name ];
-				$menu_obj      = wp_get_nav_menu_object( $menu_id );
-
-				wp_nav_menu(
-					array(
-						'theme_location'  => 'primary',
-						'menu_class'      => 'menu-wrapper',
-						'container_class' => 'primary-menu-container',
-						'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
-					)
-				);
-			endif;
-			if ( has_nav_menu( 'social' ) ) :
-				wp_nav_menu(
-					array(
-						'theme_location'  => 'social',
-						'link_before'     => '<span class="screen-reader-text">',
-						'link_after'      => '</span>' . seedlet_get_icon_svg( 'link' ),
-						'container_class' => 'social-navigation',
-						'depth'           => 1,
-					)
-				);
-			endif;
-			?>
-		</div><!-- .extra-navigation-wrapper -->
-	</nav><!-- #site-navigation -->
-<?php endif; ?>
+		<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Main', 'spearhead' ); ?>">
+			<button id="primary-close-menu" class="button close">
+				<span class="dropdown-icon close"><?php _e( 'Close', 'spearhead' ); ?> <?php echo seedlet_get_icon_svg( 'close' ); ?></span>
+				<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'spearhead' ); ?></span>
+			</button>
+			<div class="extra-navigation-wrapper">
+				<?php
+				if ( $has_primary_nav ) :
+					// Get menu slug
+					$location_name = 'primary';
+					$locations     = get_nav_menu_locations();
+					$menu_id       = $locations[ $location_name ];
+					$menu_obj      = wp_get_nav_menu_object( $menu_id );
 
-<div class="menu-button-container">
-	<?php if ( $has_primary_nav ) : ?>
-		<button id="primary-open-menu" class="button open">
-			<span class="dropdown-icon open"><?php _e( 'Menu', 'spearhead' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
-			<span class="hide-visually expanded-text"><?php _e( 'expanded', 'spearhead' ); ?></span>
-		</button>
+					wp_nav_menu(
+						array(
+							'theme_location'  => 'primary',
+							'menu_class'      => 'menu-wrapper',
+							'container_class' => 'primary-menu-container',
+							'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
+						)
+					);
+				endif;
+				if ( has_nav_menu( 'social' ) ) :
+					wp_nav_menu(
+						array(
+							'theme_location'  => 'social',
+							'link_before'     => '<span class="screen-reader-text">',
+							'link_after'      => '</span>' . seedlet_get_icon_svg( 'link' ),
+							'container_class' => 'social-navigation',
+							'depth'           => 1,
+						)
+					);
+				endif;
+				?>
+			</div><!-- .extra-navigation-wrapper -->
+		</nav><!-- #site-navigation -->
 	<?php endif; ?>
-</div>
 
-<?php if ( class_exists( 'WooCommerce' ) ) : ?>
-	<nav class="woo-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Woo Minicart', 'spearhead' ); ?>">
-		<?php
-		echo( sprintf(
-			'<button id="woo-close-menu" class="button close">
-				<span class="dropdown-icon close">%1$s %2$s</span>
-				<span class="hide-visually collapsed-text">%3$s</span>
+	<div class="menu-button-container">
+		<?php if ( $has_primary_nav ) : ?>
+			<button id="primary-open-menu" class="button open">
+				<span class="dropdown-icon open"><?php _e( 'Menu', 'spearhead' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
+				<span class="hide-visually expanded-text"><?php _e( 'expanded', 'spearhead' ); ?></span>
 			</button>
-			<div class="woocommerce-menu-container">
-				<ul id="woocommerce-menu" class="menu-wrapper"">
-				<li class="menu-item woocommerce-menu-item %4$s" title="%5$s">
-					%6$s
-					<ul class="sub-menu">
-						<li class="woocommerce-cart-widget" title="%7$s">
-							%8$s
-						</li>
-					</ul>
-				</li>',
-			esc_html__( 'Close', 'spearhead' ),
-			seedlet_get_icon_svg( 'close' ),
-			esc_html__( 'collapsed', 'spearhead' ),
-			is_cart() ? 'current-menu-item' : '',
-			esc_attr__( 'View your shopping cart', 'spearhead' ),
-			seedlet_cart_link(),
-			esc_attr__( 'View your shopping list', 'spearhead' ),
-			seedlet_cart_widget()
-		) );
-		?>
-	</nav><!-- .woo-navigation -->
-<?php endif; ?>
+		<?php endif; ?>
+	</div>
 
-<div class="menu-button-container">
 	<?php if ( class_exists( 'WooCommerce' ) ) : ?>
-		<button id="woo-open-menu" class="button open">
-			<span class="dropdown-icon open"><?php echo seedlet_get_icon_svg( 'shopping_cart' ); ?> <?php _e( 'Cart', 'spearhead' ); ?></span>
-			<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'spearhead' ); ?></span>
-		</button>
+		<nav class="woo-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Woo Minicart', 'spearhead' ); ?>">
+			<?php
+			echo( sprintf(
+				'<button id="woo-close-menu" class="button close">
+					<span class="dropdown-icon close">%1$s %2$s</span>
+					<span class="hide-visually collapsed-text">%3$s</span>
+				</button>
+				<div class="woocommerce-menu-container">
+					<ul id="woocommerce-menu" class="menu-wrapper"">
+					<li class="menu-item woocommerce-menu-item %4$s" title="%5$s">
+						%6$s
+						<ul class="sub-menu">
+							<li class="woocommerce-cart-widget" title="%7$s">
+								%8$s
+							</li>
+						</ul>
+					</li>',
+				esc_html__( 'Close', 'spearhead' ),
+				seedlet_get_icon_svg( 'close' ),
+				esc_html__( 'collapsed', 'spearhead' ),
+				is_cart() ? 'current-menu-item' : '',
+				esc_attr__( 'View your shopping cart', 'spearhead' ),
+				seedlet_cart_link(),
+				esc_attr__( 'View your shopping list', 'spearhead' ),
+				seedlet_cart_widget()
+			) );
+			?>
+		</nav><!-- .woo-navigation -->
 	<?php endif; ?>
+
+	<div class="menu-button-container is-cart">
+		<?php if ( class_exists( 'WooCommerce' ) ) : ?>
+			<button id="woo-open-menu" class="button open">
+				<span class="dropdown-icon open"><?php _e( 'Cart', 'spearhead' ); ?> <?php echo seedlet_get_icon_svg( 'shopping_cart' ); ?></span>
+				<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'spearhead' ); ?></span>
+			</button>
+		<?php endif; ?>
+	</div>
 </div>