update the header

seedlet/header.php

@@ -30,26 +30,22 @@
 						<span class="dropdown-icon open"><?php echo seedlet_get_icon_svg( 'shopping_cart' ); ?> <?php _e( 'Cart', 'seedlet' ); ?></span>
 						<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'seedlet' ); ?></span>
 					</button>
-					<button id="woo-close-menu" class="button close">
-						<span class="dropdown-icon close"><?php echo esc_html__( 'Close', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'close' ); ?></span>
-						<span class="hide-visually collapsed-text"><?php echo esc_html__( 'collapsed', 'seedlet' ); ?></span>
-					</button>
 				<?php endif; ?>
 				<?php if ( has_nav_menu( 'primary' ) ) : ?>
 					<button id="primary-open-menu" class="button open">
 						<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
 						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
 					</button>
-					<button id="primary-close-menu" class="button close">
-						<span class="dropdown-icon close"><?php _e( 'Close', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'close' ); ?></span>
-						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'seedlet' ); ?></span>
-					</button>
 				<?php endif; ?>
 			</div>
 			<?php get_template_part( 'template-parts/header/site-branding' ); ?>
 
 			<?php if ( has_nav_menu( 'primary' ) ) : ?>
 				<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Main', 'seedlet' ); ?>">
+					<button id="primary-close-menu" class="button close">
+						<span class="dropdown-icon close"><?php _e( 'Close', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'close' ); ?></span>
+						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'seedlet' ); ?></span>
+					</button>
 					<?php
 					// Get menu slug
 					$location_name = 'primary';
@@ -73,13 +69,17 @@
 				<nav class="woo-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Woo Minicart', 'seedlet' ); ?>">
 					<?php
 					echo( sprintf(
-						'<div class="woocommerce-menu-container">
+						'<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 %1$s" title="%2$s">
-								%3$s
+							<li class="menu-item woocommerce-menu-item %4$s" title="%5$s">
+								%6$s
 								<ul class="sub-menu">
-									<li class="woocommerce-cart-widget" title="%4$s">
-										%5$s
+									<li class="woocommerce-cart-widget" title="%7$s">
+										%8$s
 									</li>
 								</ul>
 							</li>',

spearhead/assets/sass/_header.scss

@@ -1,5 +1,5 @@
 $admin-bar-height: 46px;
-$site-branding-height: 73px;
+$site-branding-height: 59px;
 
 .has-main-navigation {
 	.site-header {
@@ -55,6 +55,17 @@ $site-branding-height: 73px;
 				}
 			}
 		}
+
+		button#primary-close-menu {
+			color: var(--global--color-background);
+			position: fixed;
+			top: $admin-bar-height + $site-branding-height;
+			right: 0;
+
+			&:hover {
+				color: var(--global--color-primary);
+			}
+		}
 	}
 
 	.primary-navigation .menu-item-has-children > .svg-icon {
@@ -107,7 +118,6 @@ $site-branding-height: 73px;
 	position: static;
 	width: auto;
 
-	button#primary-close-menu,
 	button#primary-open-menu {
 		margin: 0;
 		padding: 6px;
@@ -117,4 +127,8 @@ $site-branding-height: 73px;
 			margin: 0;
 		}
 	}
+
+	.primary-navigation-open & {
+		margin: 0;
+	}
 }

spearhead/style-rtl.css

@@ -121,16 +121,27 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	.site-header .primary-navigation .primary-menu-container {
 		background: var(--primary-nav--color-background);
 		padding: var(--global--spacing-unit);
-		top: 73px;
+		top: 59px;
 	}
 	.admin-bar .site-header .primary-navigation .primary-menu-container {
-		top: 119px;
+		top: 105px;
 	}
 	.site-header .primary-navigation .primary-menu-container a {
 		color: var(--global--color-background);
 	}
 }
 
+.site-header .primary-navigation button#primary-close-menu {
+	color: var(--global--color-background);
+	position: fixed;
+	top: 105px;
+	left: 0;
+}
+
+.site-header .primary-navigation button#primary-close-menu:hover {
+	color: var(--global--color-primary);
+}
+
 .site-header .primary-navigation .menu-item-has-children > .svg-icon {
 	margin-top: -2px;
 }
@@ -178,18 +189,20 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	width: auto;
 }
 
-.site-header div.menu-button-container button#primary-close-menu,
 .site-header div.menu-button-container button#primary-open-menu {
 	margin: 0;
 	padding: 6px;
 	position: static;
 }
 
-.site-header div.menu-button-container button#primary-close-menu:before,
 .site-header div.menu-button-container button#primary-open-menu:before {
 	margin: 0;
 }
 
+.primary-navigation-open .site-header div.menu-button-container {
+	margin: 0;
+}
+
 .wp-block-latest-posts > li > a {
 	color: var(--global--color-foreground);
 }

spearhead/style.css

@@ -121,16 +121,27 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	.site-header .primary-navigation .primary-menu-container {
 		background: var(--primary-nav--color-background);
 		padding: var(--global--spacing-unit);
-		top: 73px;
+		top: 59px;
 	}
 	.admin-bar .site-header .primary-navigation .primary-menu-container {
-		top: 119px;
+		top: 105px;
 	}
 	.site-header .primary-navigation .primary-menu-container a {
 		color: var(--global--color-background);
 	}
 }
 
+.site-header .primary-navigation button#primary-close-menu {
+	color: var(--global--color-background);
+	position: fixed;
+	top: 105px;
+	right: 0;
+}
+
+.site-header .primary-navigation button#primary-close-menu:hover {
+	color: var(--global--color-primary);
+}
+
 .site-header .primary-navigation .menu-item-has-children > .svg-icon {
 	margin-top: -2px;
 }
@@ -178,18 +189,20 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	width: auto;
 }
 
-.site-header div.menu-button-container button#primary-close-menu,
 .site-header div.menu-button-container button#primary-open-menu {
 	margin: 0;
 	padding: 6px;
 	position: static;
 }
 
-.site-header div.menu-button-container button#primary-close-menu:before,
 .site-header div.menu-button-container button#primary-open-menu:before {
 	margin: 0;
 }
 
+.primary-navigation-open .site-header div.menu-button-container {
+	margin: 0;
+}
+
 .wp-block-latest-posts > li > a {
 	color: var(--global--color-foreground);
 }