fixing the cart menu

spearhead/assets/sass/_header.scss

@@ -3,7 +3,8 @@ $site-branding-height: 68px;
 
 .has-main-navigation {
 	.site-header {
-		padding: var(--global--spacing-horizontal);
+		padding: 0;
+
 		a {
 			border-bottom: 1px solid transparent;
 		}
@@ -29,9 +30,6 @@ $site-branding-height: 68px;
 }
 
 .site-header {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
 	max-width: var(--responsive--alignfull-width);
 	padding: var(--global--spacing-horizontal);
 
@@ -39,13 +37,9 @@ $site-branding-height: 68px;
 		padding: 35px var(--global--spacing-horizontal);
 	}
 
-	@include media( laptop-only ){
-		flex-wrap: wrap;
-	}
-
 	.site-branding {
-		flex-basis: 30%;
-		flex-grow: 1;
+		grid-area: branding;
+		padding: var(--global--spacing-horizontal);
 		text-align: left;
 
 		.site-title {
@@ -58,6 +52,7 @@ $site-branding-height: 68px;
 		}
 
 		.site-logo {
+			grid-area: site-logo;
 			margin-left: 0;
 			margin-top: 0;
 			text-align: left;
@@ -65,14 +60,10 @@ $site-branding-height: 68px;
 	}
 
 	.primary-navigation-wrapper {
-		display: flex;
-		align-items: center;
 		margin-bottom: 6px;
 	}
 
 	.primary-navigation {
-		flex-basis: 70%;
-		flex-grow: 4;
 		margin-top: 0;
 
 		@include media( laptop-only ){ // TODO - use $navigation-max-break-point variable
@@ -170,8 +161,7 @@ $site-branding-height: 68px;
 }
 
 .has-title-and-tagline .site-logo {
-	flex-basis: 100%;
-	margin-bottom: var(--global--spacing-vertical);
+	margin: 0;
 }
 
 .primary-navigation-open .has-title-and-tagline .site-logo {
@@ -198,3 +188,14 @@ $site-branding-height: 68px;
 		margin: 0;
 	}
 }
+
+.site-header {
+	display: grid;
+	grid-template-areas:
+		"site-logo site-logo site-logo"
+		"branding branding primary-navigation"
+		"branding branding cart";
+	grid-template-columns: 0.5fr 1fr 0.5fr;
+	grid-template-rows: auto;
+	grid-column-gap: 16px;
+}

spearhead/assets/sass/navigation.scss

@@ -11,6 +11,8 @@ $navigation-max-break-point: 'laptop-only';
 
 .primary-navigation,
 .woo-navigation {
+	grid-area: navigation;
+
 	// Top-level Menu Item
 	.primary-menu-container > ul > .menu-item {
 		padding: 0;
@@ -86,10 +88,30 @@ div.extra-navigation-wrapper {
 	}
 }
 
-.has-logo.has-title-and-tagline .menu-button-container {
+.menu-button-container {
+	grid-area: primary-navigation;
+	position: relative;
+	left: unset;
+	top: unset;
+
+	.admin-bar:not(.primary-navigation-open) & {
+		top: unset;
+	}
+
+	&.is-cart {
+		grid-area: cart;
+	}
+}
+
+/*.has-logo.has-title-and-tagline .menu-button-container {
 	top: calc( var(--branding--logo--max-height) + var(--global--spacing-vertical) );
 
 	.admin-bar & {
 		top: calc( var(--wpadmin-bar--height) + var(--branding--logo--max-height) + var(--global--spacing-vertical) );
 	}
 }
+*/
+
+.social-navigation {
+	grid-area: navigation;
+}

spearhead/navigation-rtl.css

@@ -524,6 +524,11 @@
 	}
 }
 
+.primary-navigation,
+.woo-navigation {
+	grid-area: navigation;
+}
+
 .primary-navigation .primary-menu-container > ul > .menu-item,
 .woo-navigation .primary-menu-container > ul > .menu-item {
 	padding: 0;
@@ -594,10 +599,29 @@
 	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 {
+	grid-area: primary-navigation;
+	position: relative;
+	right: unset;
+	top: unset;
+}
+
+.admin-bar:not(.primary-navigation-open) .menu-button-container {
+	top: unset;
+}
+
+.menu-button-container.is-cart {
+	grid-area: cart;
 }
 
-.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));
+/*.has-logo.has-title-and-tagline .menu-button-container {
+	top: calc( var(--branding--logo--max-height) + var(--global--spacing-vertical) );
+
+	.admin-bar & {
+		top: calc( var(--wpadmin-bar--height) + var(--branding--logo--max-height) + var(--global--spacing-vertical) );
+	}
+}
+*/
+.social-navigation {
+	grid-area: navigation;
 }

spearhead/navigation.css

@@ -524,6 +524,11 @@
 	}
 }
 
+.primary-navigation,
+.woo-navigation {
+	grid-area: navigation;
+}
+
 .primary-navigation .primary-menu-container > ul > .menu-item,
 .woo-navigation .primary-menu-container > ul > .menu-item {
 	padding: 0;
@@ -594,12 +599,31 @@
 	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 {
+	grid-area: primary-navigation;
+	position: relative;
+	left: unset;
+	top: unset;
+}
+
+.admin-bar:not(.primary-navigation-open) .menu-button-container {
+	top: unset;
+}
+
+.menu-button-container.is-cart {
+	grid-area: cart;
 }
 
-.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));
+/*.has-logo.has-title-and-tagline .menu-button-container {
+	top: calc( var(--branding--logo--max-height) + var(--global--spacing-vertical) );
+
+	.admin-bar & {
+		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,7 +214,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-main-navigation .site-header {
-	padding: var(--global--spacing-horizontal);
+	padding: 0;
 }
 
 .has-main-navigation .site-header a {
@@ -241,9 +241,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
 	max-width: var(--responsive--alignfull-width);
 	padding: var(--global--spacing-horizontal);
 }
@@ -254,15 +251,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
-@media only screen and (max-width: 829px) {
-	.site-header {
-		flex-wrap: wrap;
-	}
-}
-
 .site-header .site-branding {
-	flex-basis: 30%;
-	flex-grow: 1;
+	grid-area: branding;
+	padding: var(--global--spacing-horizontal);
 	text-align: right;
 }
 
@@ -276,20 +267,17 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header .site-branding .site-logo {
+	grid-area: site-logo;
 	margin-right: 0;
 	margin-top: 0;
 	text-align: right;
 }
 
 .site-header .primary-navigation-wrapper {
-	display: flex;
-	align-items: center;
 	margin-bottom: 6px;
 }
 
 .site-header .primary-navigation {
-	flex-basis: 70%;
-	flex-grow: 4;
 	margin-top: 0;
 }
 
@@ -382,8 +370,7 @@ 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;
 }
 
 .primary-navigation-open .has-title-and-tagline .site-logo {
@@ -408,6 +395,14 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.site-header {
+	display: grid;
+	grid-template-areas: "site-logo site-logo site-logo" "branding branding primary-navigation" "branding branding cart";
+	grid-template-columns: 0.5fr 1fr 0.5fr;
+	grid-template-rows: auto;
+	grid-column-gap: 16px;
+}
+
 .site-footer > .site-info {
 	font-family: var(--global--font-secondary);
 }

spearhead/style.css

@@ -214,7 +214,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-main-navigation .site-header {
-	padding: var(--global--spacing-horizontal);
+	padding: 0;
 }
 
 .has-main-navigation .site-header a {
@@ -241,9 +241,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
 	max-width: var(--responsive--alignfull-width);
 	padding: var(--global--spacing-horizontal);
 }
@@ -254,15 +251,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
-@media only screen and (max-width: 829px) {
-	.site-header {
-		flex-wrap: wrap;
-	}
-}
-
 .site-header .site-branding {
-	flex-basis: 30%;
-	flex-grow: 1;
+	grid-area: branding;
+	padding: var(--global--spacing-horizontal);
 	text-align: left;
 }
 
@@ -276,20 +267,17 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header .site-branding .site-logo {
+	grid-area: site-logo;
 	margin-left: 0;
 	margin-top: 0;
 	text-align: left;
 }
 
 .site-header .primary-navigation-wrapper {
-	display: flex;
-	align-items: center;
 	margin-bottom: 6px;
 }
 
 .site-header .primary-navigation {
-	flex-basis: 70%;
-	flex-grow: 4;
 	margin-top: 0;
 }
 
@@ -382,8 +370,7 @@ 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;
 }
 
 .primary-navigation-open .has-title-and-tagline .site-logo {
@@ -408,6 +395,14 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.site-header {
+	display: grid;
+	grid-template-areas: "site-logo site-logo site-logo" "branding branding primary-navigation" "branding branding cart";
+	grid-template-columns: 0.5fr 1fr 0.5fr;
+	grid-template-rows: auto;
+	grid-column-gap: 16px;
+}
+
 .site-footer > .site-info {
 	font-family: var(--global--font-secondary);
 }

spearhead/template-parts/header/navigation.php

@@ -1,5 +1,5 @@
 <?php $has_primary_nav = has_nav_menu( 'primary' );
-	if ( $has_primary_nav || has_nav_menu( 'social' ) ) : ?>
+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>
@@ -79,7 +79,7 @@
 	</nav><!-- .woo-navigation -->
 <?php endif; ?>
 
-<div class="menu-button-container">
+<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>