Merge pull request #2557 from Automattic/fix/menu

Spearhead: match the navigation to the design

seedlet/assets/css/style-navigation-rtl.css

@@ -10,6 +10,18 @@
 	width: 100%;
 }
 
+@media only screen and (max-width: 481px) {
+	.menu-button-container {
+		display: block;
+	}
+}
+
+.lock-scrolling .menu-button-container > .button {
+	position: fixed;
+	top: 0;
+	left: 0;
+}
+
 .menu-button-container #primary-open-menu {
 	margin-right: auto;
 	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
@@ -17,12 +29,7 @@
 	margin-left: calc(0.25 * var(--global--spacing-unit));
 }
 
-@media only screen and (max-width: 481px) {
-	.menu-button-container {
-		display: flex;
-	}
-}
-
+.admin-bar.lock-scrolling .menu-button-container > .button,
 .admin-bar:not(.primary-navigation-open) .menu-button-container {
 	top: 46px;
 }
@@ -46,9 +53,17 @@
 .primary-navigation .button.close,
 .woo-navigation .button.close {
 	display: none;
+	position: absolute;
+	left: 0;
 	z-index: 501;
 }
 
+.admin-bar .menu-button-container .button.close, .admin-bar
+.primary-navigation .button.close, .admin-bar
+.woo-navigation .button.close {
+	top: -46px;
+}
+
 .menu-button-container .button#woo-open-menu,
 .primary-navigation .button#woo-open-menu,
 .woo-navigation .button#woo-open-menu {
@@ -176,21 +191,11 @@
 	transform: translateY(0);
 }
 
-.lock-scrolling .primary-navigation > .button, .lock-scrolling
-.woo-navigation > .button {
-	position: fixed;
-	top: 0;
-	left: 0;
-}
-
 .admin-bar .primary-navigation,
-.admin-bar .primary-navigation > div,
-.admin-bar.lock-scrolling .primary-navigation > .button, .admin-bar
+.admin-bar .primary-navigation > div, .admin-bar
 .woo-navigation,
 .admin-bar
-.woo-navigation > div,
-.admin-bar.lock-scrolling
-.woo-navigation > .button {
+.woo-navigation > div {
 	top: 46px;
 }
 
@@ -457,7 +462,9 @@
 
 @media only screen and (max-width: 481px) {
 	.lock-scrolling .site {
-		position: fixed;
+		right: 0;
 		max-width: 100%;
+		position: fixed;
+		left: 0;
 	}
 }

seedlet/assets/css/style-navigation.css

@@ -10,6 +10,18 @@
 	width: 100%;
 }
 
+@media only screen and (max-width: 481px) {
+	.menu-button-container {
+		display: block;
+	}
+}
+
+.lock-scrolling .menu-button-container > .button {
+	position: fixed;
+	top: 0;
+	right: 0;
+}
+
 .menu-button-container #primary-open-menu {
 	margin-left: auto;
 	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
@@ -17,12 +29,7 @@
 	margin-right: calc(0.25 * var(--global--spacing-unit));
 }
 
-@media only screen and (max-width: 481px) {
-	.menu-button-container {
-		display: flex;
-	}
-}
-
+.admin-bar.lock-scrolling .menu-button-container > .button,
 .admin-bar:not(.primary-navigation-open) .menu-button-container {
 	top: 46px;
 }
@@ -46,9 +53,17 @@
 .primary-navigation .button.close,
 .woo-navigation .button.close {
 	display: none;
+	position: absolute;
+	right: 0;
 	z-index: 501;
 }
 
+.admin-bar .menu-button-container .button.close, .admin-bar
+.primary-navigation .button.close, .admin-bar
+.woo-navigation .button.close {
+	top: -46px;
+}
+
 .menu-button-container .button#woo-open-menu,
 .primary-navigation .button#woo-open-menu,
 .woo-navigation .button#woo-open-menu {
@@ -176,21 +191,11 @@
 	transform: translateY(0);
 }
 
-.lock-scrolling .primary-navigation > .button, .lock-scrolling
-.woo-navigation > .button {
-	position: fixed;
-	top: 0;
-	right: 0;
-}
-
 .admin-bar .primary-navigation,
-.admin-bar .primary-navigation > div,
-.admin-bar.lock-scrolling .primary-navigation > .button, .admin-bar
+.admin-bar .primary-navigation > div, .admin-bar
 .woo-navigation,
 .admin-bar
-.woo-navigation > div,
-.admin-bar.lock-scrolling
-.woo-navigation > .button {
+.woo-navigation > div {
 	top: 46px;
 }
 
@@ -457,8 +462,10 @@
 
 @media only screen and (max-width: 481px) {
 	.lock-scrolling .site {
-		position: fixed;
+		left: 0;
 		max-width: 100%;
+		position: fixed;
+		right: 0;
 	}
 }
 

seedlet/assets/sass/components/navigation/_style.scss

@@ -1,7 +1,3 @@
-// Abstracts
-// - Mixins, variables and functions
-@import "../../abstracts/mixins";
-
 // Navigation
 
 // Mobile menu toggles
@@ -12,6 +8,18 @@
 	position: absolute;
 	top: 0;
 	width: 100%;
+
+	@include media( $navigation-max-break-point ){
+		display: block;
+	}
+
+	// Adjust button postion when scrolling is locked
+	.lock-scrolling & > .button {
+		position: fixed;
+		top: 0;
+		right: 0;
+	}
+
 	#primary-open-menu {
 		margin-left: auto;
 		padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
@@ -19,10 +27,7 @@
 		margin-right: calc(0.25 * var(--global--spacing-unit));
 	}
 
-	@include media(mobile-only){
-		display: flex;
-	}
-
+	.admin-bar.lock-scrolling & > .button,
 	.admin-bar:not(.primary-navigation-open) & {
 		top: 46px;
 	}
@@ -42,7 +47,12 @@
 		}
 		&.close {
 			display: none;
+			position: absolute;
+			right: 0;
 			z-index: 501;
+			.admin-bar & {
+				top: -46px;
+			}
 		}
 
 		&#woo-open-menu {
@@ -118,7 +128,7 @@
 	margin-top: 0;
 	margin-bottom: 0;
 
-	@include media(mobile-only) {
+	@include media( $navigation-max-break-point ) {
 		width: 100%;
 	}
 
@@ -138,7 +148,7 @@
 		transition: all .15s ease-in-out;
 		transform: translateY(var(--global--spacing-vertical));
 
-		@include media(mobile-only) {
+		@include media( $navigation-max-break-point ) {
 			z-index: 499;
 		}
 	}
@@ -155,21 +165,13 @@
 
 	}
 
-	// Adjust button postion when scrolling is locked
-	.lock-scrolling & > .button {
-		position: fixed;
-		top: 0;
-		right: 0;
-	}
-
 	// Adjust positions when logged-in
 	.admin-bar &,
-	.admin-bar & > div,
-	.admin-bar.lock-scrolling & > .button {
+	.admin-bar & > div {
 		top: 46px;
 	}
 
-	@include media(mobile) {
+	@include media( $navigation-min-break-point ) {
 		position: relative;
 		display: flex;
 		justify-content: var(--primary-nav--justify-content);
@@ -233,7 +235,7 @@
 				z-index: 99999;
 			}
 
-			@include media(mobile) {
+			@include media( $navigation-min-break-point ) {
 				display: inherit;
 				width: inherit;
 
@@ -254,7 +256,7 @@
 
 			position: relative;
 
-			@include media(mobile) {
+			@include media( $navigation-min-break-point ) {
 				margin: 0;
 				background: var(--global--color-background);
 				box-shadow: var(--global--elevation);
@@ -282,7 +284,7 @@
 	.primary-menu-container > ul > .menu-item {
 		padding: calc(0.5 * var(--primary-nav--padding)) 0;
 
-		@include media(mobile) {
+		@include media( $navigation-min-break-point ) {
 			display: flex;
 			align-items: center;
 			padding: var(--primary-nav--padding);
@@ -315,7 +317,7 @@
 		font-size: var(--primary-nav--font-size-mobile);
 		font-weight: var(--primary-nav--font-weight);
 
-		@include media(mobile) {
+		@include media( $navigation-min-break-point ) {
 			display: block;
 			font-family: var(--primary-nav--font-family);
 			font-size: var(--primary-nav--font-size);
@@ -338,7 +340,7 @@
 		list-style: none;
 		margin-left: var(--primary-nav--padding);
 
-		@include media(mobile) {
+		@include media( $navigation-min-break-point ) {
 			padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
 
 			> .menu-item > .sub-menu {
@@ -354,7 +356,7 @@
 			padding-top: calc(0.5 * var(--primary-nav--padding));
 			padding-bottom: calc(0.5 * var(--primary-nav--padding));
 
-			@include media(mobile) {
+			@include media( $navigation-min-break-point ) {
 				padding-top: calc(0.5 * var(--primary-nav--padding));
 				padding-bottom: calc(0.5 * var(--primary-nav--padding));
 			}
@@ -364,7 +366,7 @@
 				font-size: var(--primary-nav--font-size-sub-menu-mobile);
 				font-style: var(--primary-nav--font-style-sub-menu-mobile);
 
-				@include media(mobile) {
+				@include media( $navigation-min-break-point ) {
 					font-size: var(--primary-nav--font-size);
 					font-style: var(--primary-nav--font-style);
 				}
@@ -379,7 +381,7 @@
  			display: none;
  		}
 
-		@include media(mobile) {
+		@include media( $navigation-min-break-point ) {
 
 			> .svg-icon {
 				display: inline-block;
@@ -400,9 +402,11 @@
 }
 
 // Keep the menu pinned to the top when the menu is open.
-@include media(mobile-only) {
+@include media( $navigation-max-break-point ) {
 	.lock-scrolling .site {
-		position: fixed;
+		left: 0;
 		max-width: 100%;
+		position: fixed;
+		right: 0;
 	}
 }

seedlet/assets/sass/style-navigation.scss

@@ -1 +1,9 @@
+// Abstracts
+// - Mixins, variables and functions
+@import "abstracts/mixins";
+
+// Variables
+$navigation-min-break-point: 'mobile';
+$navigation-max-break-point: 'mobile-only';
+
 @import "components/navigation/style";

seedlet/header.php

@@ -28,12 +28,12 @@
 				<?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', 'seedlet' ); ?></span>
-						<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'seedlet' ) ?></span>
+						<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', '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="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>
 				<?php endif; ?>
@@ -43,15 +43,15 @@
 			<?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="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';
-					$locations = get_nav_menu_locations();
-					$menu_id = $locations[ $location_name ];
-					$menu_obj = wp_get_nav_menu_object( $menu_id );
+					$locations     = get_nav_menu_locations();
+					$menu_id       = $locations[ $location_name ];
+					$menu_obj      = wp_get_nav_menu_object( $menu_id );
 
 					wp_nav_menu(
 						array(
@@ -67,7 +67,8 @@
 
 			<?php if ( class_exists( 'WooCommerce' ) ) : ?>
 				<nav class="woo-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Woo Minicart', 'seedlet' ); ?>">
-					<?php echo( sprintf(
+					<?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>
@@ -90,7 +91,8 @@
 						seedlet_cart_link(),
 						esc_attr__( 'View your shopping list', 'seedlet' ),
 						seedlet_cart_widget()
-					) ); ?>
+					) );
+					?>
 				</nav><!-- .woo-navigation -->
 			<?php endif; ?>
 

spearhead/assets/sass/_breakpoints.scss

@@ -0,0 +1,10 @@
+/**
+ * Required Variables
+ */
+ $default_width: 782px;
+ $alignwide_width: 1247px;
+ $breakpoint_sm: 482px;
+ $breakpoint_md: 592px;
+ $breakpoint_lg: 830px; // default width + the margins
+ $breakpoint_xl: 1295px; // wide width + the margins
+ $breakpoint_xxl: 1440px;

spearhead/assets/sass/_header.scss

@@ -1,12 +1,20 @@
+$admin-bar-height: 46px;
+$site-branding-height: 68px;
+
 .has-main-navigation {
-    .site-header {
-        @include media( mobile-only ){
-            padding-top: 4px;
-            .site-description {
-                display: none;
-            }
-        }
-    }
+	.site-header {
+		padding: var(--global--spacing-horizontal) var(--global--spacing-horizontal);
+
+		@include media( mobile-only ){
+			.site-title {
+				margin: 0;
+			}
+
+			.site-description {
+				display: none;
+			}
+		}
+	}
 }
 
 .has-sticky-post .site-header {
@@ -14,36 +22,128 @@
 }
 
 .site-header {
-    display: flex;
-    justify-content: space-between;
-    max-width: var(--responsive--alignwide-width);
-
-    .site-branding {
-        flex-grow: 1;
-        text-align: left;
-
-        .site-title > a {
-                background: inherit;
-            text-shadow: none;
-        }
-    }
-
-    .primary-navigation {
-        flex-grow: 4;
-        justify-content: flex-end;
-        margin-top: 0;
-    }
-
-    .primary-navigation .menu-item-has-children > .svg-icon {
-        margin-top: -2px;
-    }
-
-    .primary-navigation > div > ul li, .woo-navigation > div > ul li {
-        color: var(--global--color-secondary);
-        margin: 6px calc( var(--global--spacing-horizontal) / 2);
-    }
-
-    > .site-branding, > nav {
-        margin: 0 calc( var( --global--spacing-horizontal ) / 2 );
-    }
-}
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	max-width: var(--responsive--alignfull-width);
+
+	@include media( mobile-only ){
+		align-items: center;
+	}
+
+	.site-branding {
+		flex-grow: 1;
+		text-align: left;
+
+		.site-title > a {
+			background: inherit;
+			text-shadow: none;
+		}
+	}
+
+	.primary-navigation {
+		flex-grow: 4;
+		margin-top: 0;
+
+		@include media( laptop-only ){ // TODO - use $navigation-max-break-point variable
+			.primary-menu-container {
+				background: var(--primary-nav--color-background);
+				padding: var(--global--spacing-unit);
+				top: $site-branding-height;
+
+				.admin-bar & {
+					top: $site-branding-height + $admin-bar-height;
+				}
+
+				a {
+					color: var(--global--color-background);
+				}
+			}
+		}
+
+		button#primary-close-menu {
+			color: var(--global--color-secondary);
+			position: fixed;
+			top: 0;
+			right: 0;
+
+			.admin-bar & {
+				top: $admin-bar-height;
+			}
+
+			&:hover {
+				color: var(--global--color-primary);
+			}
+		}
+	}
+
+	.primary-navigation .menu-item-has-children > .svg-icon {
+		margin-top: -2px;
+	}
+
+
+	.primary-navigation > div > ul li, .woo-navigation > div > ul li {
+		color: var(--global--color-secondary);
+		margin: 6px;
+		padding: var(--social-nav--padding);
+
+		a:hover {
+			border-color: transparent;
+			color: var(--global--color-primary);
+		}
+	}
+
+	> .site-branding, > nav {
+		margin: 0;
+	}
+
+	.social-navigation {
+		flex-basis: 100%;
+
+		ul {
+			justify-content: flex-start;
+			flex-wrap: nowrap;
+			margin-top: var(--global--spacing-vertical);
+
+			li {
+				margin: 0;
+				padding: 0 var(--social-nav--padding) 0 0;
+			}
+
+		}
+		@include media( laptop ){
+			flex-basis: auto;
+			ul {
+				justify-content: flex-end;
+				margin-top: 0;
+
+				li {
+					padding: 0 0 0 var(--social-nav--padding);
+				}
+			}
+		}
+
+		li:first-of-type > a,
+		a {
+			padding: 0;
+
+			&:hover {
+				border-color: transparent;
+				color: var(--global--color-primary);
+			}
+		}
+	}
+}
+
+
+.site-header div.menu-button-container {
+	button#primary-open-menu {
+		&:before {
+			margin: 0;
+		}
+	}
+
+	.primary-navigation-open & {
+		margin: 0;
+	}
+}

spearhead/assets/sass/_responsive.scss

@@ -1,85 +1,11 @@
 /**
  * Repsonsive Styles
  */
-
-/**
- * Required Variables
- */
-$default_width: 782px;
-$alignwide_width: 1247px;
-$breakpoint_sm: 482px;
-$breakpoint_md: 592px;
-$breakpoint_lg: 830px; // default width + the margins
-$breakpoint_xl: 1295px; // wide width + the margins
-$breakpoint_xxl: 1440px;
-
-// Responsive breakpoints mixin
-@mixin media( $res ) {
-
-	@if mobile-only == $res {
-		@media only screen and (max-width: #{$breakpoint_sm - 1}) {
-			@content;
-		}
-	}
-
-	@if mobile == $res {
-		@media only screen and (min-width: #{$breakpoint_sm}) {
-			@content;
-		}
-	}
-
-	@if tablet-only == $res {
-		@media only screen and (max-width: #{$breakpoint_md - 1}) {
-			@content;
-		}
-	}
-
-	@if tablet == $res {
-		@media only screen and (min-width: #{$breakpoint_md}) {
-			@content;
-		}
-	}
-
-	@if laptop-only == $res {
-		@media only screen and (max-width: #{$breakpoint_lg - 1}) {
-			@content;
-		}
-	}
-
-	@if laptop == $res {
-		@media only screen and (min-width: #{$breakpoint_lg}) {
-			@content;
-		}
-	}
-
-	@if desktop-only == $res {
-		@media only screen and (max-width: #{$breakpoint_xl - 1}) {
-			@content;
-		}
-	}
-
-	@if desktop == $res {
-		@media only screen and (min-width: #{$breakpoint_xl}) {
-			@content;
-		}
-	}
-
-	@if wide-only == $res {
-		@media only screen and (max-width: #{$breakpoint_xxl - 1}) {
-			@content;
-		}
-	}
-
-	@if wide == $res {
-		@media only screen and (min-width: #{$breakpoint_xxl}) {
-			@content;
-		}
-	}
-}
-
 @include media(laptop) {
 	:root {
+		--global--spacing-horizontal: 60px;
+		--global--spacing-vertical: 35px;
 		--responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$default_width});
 		--responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), #{$alignwide_width});
 	}
-}
+}

spearhead/assets/sass/navigation.scss

@@ -0,0 +1,10 @@
+// Abstracts
+// - Mixins, variables and functions
+@import "../../../seedlet/assets/sass/abstracts/mixins";
+@import "breakpoints";
+
+// Variables
+$navigation-min-break-point: 'laptop';
+$navigation-max-break-point: 'laptop-only';
+
+@import "../../../seedlet/assets/sass/components/navigation/style";

spearhead/assets/sass/style.scss

@@ -4,17 +4,19 @@ Theme URI: https://github.com/Automattic/themes/root-child
 Author: Automattic
 Author URI: https://automattic.com/
 Description: Share your podcast with the world using Spearhead.
-Requires at least: WordPress 5.4 
+Requires at least: WordPress 5.4
 Version: 1.2.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: seedlet
-Text Domain: spearhead 
+Text Domain: spearhead
 Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 */
 
+@import "../../../seedlet/assets/sass/abstracts/mixins";
+@import "breakpoints";
 @import "responsive";
 @import "posts-and-pages";
 @import "text";
 @import "header";
-@import "block-extends";
+@import "block-extends";

spearhead/functions.php

@@ -112,6 +112,9 @@ add_filter( 'seedlet_content_width', 'spearhead_content_width' );
  * Enqueue scripts and styles.
  */
 function spearhead_scripts() {
+	// dequeue parent styles
+	wp_dequeue_style( 'seedlet-style-navigation' );
+
 	// enqueue Google fonts, if necessary
 	wp_enqueue_style( 'spearhead-fonts', spearhead_fonts_url(), array(), null );
 
@@ -120,9 +123,11 @@ function spearhead_scripts() {
 
 	// enqueue child styles
 	wp_enqueue_style( 'spearhead-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
+	wp_enqueue_style( 'spearhead-navigation', get_stylesheet_directory_uri() . '/navigation.css', array(), wp_get_theme()->get( 'Version' ) );
 
 	// enqueue child RTL styles
 	wp_style_add_data( 'spearhead-style', 'rtl', 'replace' );
+	wp_style_add_data( 'spearhead-navigation', 'rtl', 'replace' );
 }
 add_action( 'wp_enqueue_scripts', 'spearhead_scripts', 11 );
 

spearhead/navigation-rtl.css

@@ -0,0 +1,473 @@
+/**
+ * Required Variables
+ */
+/**
+ * Required Variables
+ */
+.menu-button-container {
+	display: none;
+	justify-content: space-between;
+	right: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+
+@media only screen and (max-width: 829px) {
+	.menu-button-container {
+		display: block;
+	}
+}
+
+.lock-scrolling .menu-button-container > .button {
+	position: fixed;
+	top: 0;
+	left: 0;
+}
+
+.menu-button-container #primary-open-menu {
+	margin-right: auto;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+}
+
+.admin-bar.lock-scrolling .menu-button-container > .button,
+.admin-bar:not(.primary-navigation-open) .menu-button-container {
+	top: 46px;
+}
+
+.menu-button-container .button,
+.primary-navigation .button,
+.woo-navigation .button {
+	font-size: var(--primary-nav--font-size);
+	background-color: transparent;
+	color: var(--primary-nav--color-link);
+	z-index: 500;
+}
+
+.menu-button-container .button.open,
+.primary-navigation .button.open,
+.woo-navigation .button.open {
+	display: flex;
+}
+
+.menu-button-container .button.close,
+.primary-navigation .button.close,
+.woo-navigation .button.close {
+	display: none;
+	position: absolute;
+	left: 0;
+	z-index: 501;
+}
+
+.admin-bar .menu-button-container .button.close, .admin-bar
+.primary-navigation .button.close, .admin-bar
+.woo-navigation .button.close {
+	top: -46px;
+}
+
+.menu-button-container .button#woo-open-menu,
+.primary-navigation .button#woo-open-menu,
+.woo-navigation .button#woo-open-menu {
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-right: calc(0.25 * var(--global--spacing-unit));
+}
+
+.menu-button-container .button#woo-open-menu .svg-icon,
+.primary-navigation .button#woo-open-menu .svg-icon,
+.woo-navigation .button#woo-open-menu .svg-icon {
+	margin-right: 0;
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+	vertical-align: middle;
+}
+
+.menu-button-container .button .dropdown-icon,
+.primary-navigation .button .dropdown-icon,
+.woo-navigation .button .dropdown-icon {
+	display: flex;
+	align-items: center;
+}
+
+.menu-button-container .button .dropdown-icon .svg-icon,
+.primary-navigation .button .dropdown-icon .svg-icon,
+.woo-navigation .button .dropdown-icon .svg-icon {
+	margin-right: calc(0.25 * var(--global--spacing-unit));
+}
+
+.menu-button-container .button .dropdown-icon.open .svg-icon,
+.primary-navigation .button .dropdown-icon.open .svg-icon,
+.woo-navigation .button .dropdown-icon.open .svg-icon {
+	position: relative;
+	top: -1px;
+}
+
+.menu-button-container .button .hide-visually,
+.primary-navigation .button .hide-visually,
+.woo-navigation .button .hide-visually {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+
+.primary-navigation-open .menu-button-container #primary-open-menu, .primary-navigation-open
+.primary-navigation #primary-open-menu, .primary-navigation-open
+.woo-navigation #primary-open-menu {
+	display: none;
+}
+
+.primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open
+.primary-navigation #primary-close-menu, .primary-navigation-open
+.woo-navigation #primary-close-menu {
+	display: flex;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+}
+
+.woo-navigation-open .menu-button-container #woo-open-menu, .woo-navigation-open
+.primary-navigation #woo-open-menu, .woo-navigation-open
+.woo-navigation #woo-open-menu {
+	display: none;
+}
+
+.woo-navigation-open .menu-button-container #woo-close-menu, .woo-navigation-open
+.primary-navigation #woo-close-menu, .woo-navigation-open
+.woo-navigation #woo-close-menu {
+	display: flex;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+}
+
+.primary-navigation,
+.woo-navigation {
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: var(--primary-nav--color-text);
+	font-size: var(--primary-nav--font-size);
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+@media only screen and (max-width: 829px) {
+	.primary-navigation,
+	.woo-navigation {
+		width: 100%;
+	}
+}
+
+.primary-navigation > div,
+.woo-navigation > div {
+	visibility: hidden;
+	opacity: 0;
+	position: fixed;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	padding: calc(4* var(--global--spacing-unit)) var(--global--spacing-unit) var(--global--spacing-horizontal);
+	background-color: var(--global--color-background);
+	overflow-x: hidden;
+	overflow-y: scroll;
+	transition: all .15s ease-in-out;
+	transform: translateY(var(--global--spacing-vertical));
+}
+
+@media only screen and (max-width: 829px) {
+	.primary-navigation > div,
+	.woo-navigation > div {
+		z-index: 499;
+	}
+}
+
+.primary-navigation-open .primary-navigation > .primary-menu-container, .primary-navigation-open
+.woo-navigation > .primary-menu-container {
+	visibility: visible;
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.admin-bar .primary-navigation,
+.admin-bar .primary-navigation > div, .admin-bar
+.woo-navigation,
+.admin-bar
+.woo-navigation > div {
+	top: 46px;
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation,
+	.woo-navigation {
+		position: relative;
+		display: flex;
+		justify-content: var(--primary-nav--justify-content);
+		margin-top: calc( var(--global--spacing-vertical) * 1.5);
+	}
+	.primary-navigation > div,
+	.woo-navigation > div {
+		visibility: visible;
+		opacity: 1;
+		position: relative;
+		padding: 0;
+		background-color: transparent;
+		overflow: initial;
+		transform: none;
+	}
+	.primary-navigation #toggle-menu,
+	.woo-navigation #toggle-menu {
+		display: none;
+	}
+	.primary-navigation > div > ul > li > ul,
+	.woo-navigation > div > ul > li > ul {
+		display: none;
+	}
+	.admin-bar .primary-navigation, .admin-bar
+	.woo-navigation {
+		top: initial;
+	}
+	.admin-bar .primary-navigation > div, .admin-bar
+	.woo-navigation > div {
+		top: initial;
+	}
+}
+
+.primary-navigation > div > ul,
+.woo-navigation > div > ul {
+	display: flex;
+	justify-content: var(--primary-nav--justify-content);
+	flex-wrap: wrap;
+	list-style: none;
+	margin: 0;
+	max-width: none;
+	padding-right: 0;
+	position: relative;
+	/* Sub-menus Flyout */
+}
+
+.primary-navigation > div > ul ul,
+.woo-navigation > div > ul ul {
+	padding-right: 0;
+}
+
+.primary-navigation > div > ul li,
+.woo-navigation > div > ul li {
+	display: block;
+	position: relative;
+	width: 100%;
+	z-index: 1;
+}
+
+.primary-navigation > div > ul li:hover, .primary-navigation > div > ul li:focus-within,
+.woo-navigation > div > ul li:hover,
+.woo-navigation > div > ul li:focus-within {
+	cursor: pointer;
+	z-index: 99999;
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation > div > ul li,
+	.woo-navigation > div > ul li {
+		display: inherit;
+		width: inherit;
+		/* Submenu display */
+	}
+	.primary-navigation > div > ul li:hover > ul,
+	.primary-navigation > div > ul li:focus-within > ul,
+	.primary-navigation > div > ul li ul:hover,
+	.primary-navigation > div > ul li ul:focus,
+	.woo-navigation > div > ul li:hover > ul,
+	.woo-navigation > div > ul li:focus-within > ul,
+	.woo-navigation > div > ul li ul:hover,
+	.woo-navigation > div > ul li ul:focus {
+		visibility: visible;
+		opacity: 1;
+		display: block;
+	}
+}
+
+.primary-navigation > div > ul > li > .sub-menu,
+.woo-navigation > div > ul > li > .sub-menu {
+	position: relative;
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation > div > ul > li > .sub-menu,
+	.woo-navigation > div > ul > li > .sub-menu {
+		margin: 0;
+		background: var(--global--color-background);
+		box-shadow: var(--global--elevation);
+		right: 0;
+		top: calc(100% - (0.5 * var(--primary-nav--padding)));
+		min-width: max-content;
+		opacity: 0;
+		position: absolute;
+		transition: all 0.5s ease;
+		visibility: hidden;
+	}
+}
+
+.primary-navigation > div > ul > li > .sub-menu .sub-menu,
+.woo-navigation > div > ul > li > .sub-menu .sub-menu {
+	width: 100%;
+}
+
+.primary-navigation .primary-menu > .menu-item:hover > a,
+.woo-navigation .primary-menu > .menu-item:hover > a {
+	color: var(--primary-nav--color-link-hover);
+}
+
+.primary-navigation .primary-menu-container > ul > .menu-item,
+.woo-navigation .primary-menu-container > ul > .menu-item {
+	padding: calc(0.5 * var(--primary-nav--padding)) 0;
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation .primary-menu-container > ul > .menu-item,
+	.woo-navigation .primary-menu-container > ul > .menu-item {
+		display: flex;
+		align-items: center;
+		padding: var(--primary-nav--padding);
+	}
+}
+
+.primary-navigation .menu-item > a,
+.woo-navigation .menu-item > a {
+	color: var(--primary-nav--color-link);
+}
+
+.primary-navigation .menu-item > a:hover,
+.woo-navigation .menu-item > a:hover {
+	color: var(--primary-nav--color-link-hover);
+	border-color: var(--global--color-secondary);
+}
+
+.primary-navigation .menu-item > a:focus,
+.woo-navigation .menu-item > a:focus {
+	color: var(--global--color-secondary);
+}
+
+.primary-navigation .menu-item > a:active,
+.woo-navigation .menu-item > a:active {
+	color: var(--primary-nav--color-link);
+}
+
+.primary-navigation a,
+.woo-navigation a {
+	color: currentColor;
+	display: inline;
+	font-family: var(--primary-nav--font-family-mobile);
+	font-size: var(--primary-nav--font-size-mobile);
+	font-weight: var(--primary-nav--font-weight);
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation a,
+	.woo-navigation a {
+		display: block;
+		font-family: var(--primary-nav--font-family);
+		font-size: var(--primary-nav--font-size);
+		font-weight: var(--primary-nav--font-weight);
+	}
+}
+
+.primary-navigation a + svg,
+.woo-navigation a + svg {
+	fill: currentColor;
+}
+
+.primary-navigation a:hover, .primary-navigation a:link, .primary-navigation a:visited,
+.woo-navigation a:hover,
+.woo-navigation a:link,
+.woo-navigation a:visited {
+	color: currentColor;
+}
+
+.primary-navigation .sub-menu,
+.woo-navigation .sub-menu {
+	list-style: none;
+	margin-right: var(--primary-nav--padding);
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation .sub-menu,
+	.woo-navigation .sub-menu {
+		padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
+	}
+	.primary-navigation .sub-menu > .menu-item > .sub-menu,
+	.woo-navigation .sub-menu > .menu-item > .sub-menu {
+		padding: 0;
+	}
+	.primary-navigation .sub-menu > .menu-item.menu-item-has-children,
+	.woo-navigation .sub-menu > .menu-item.menu-item-has-children {
+		padding: calc(0.5 * var(--primary-nav--padding)) 0 0 var(--primary-nav--padding);
+	}
+}
+
+.primary-navigation .sub-menu .menu-item,
+.woo-navigation .sub-menu .menu-item {
+	padding-top: calc(0.5 * var(--primary-nav--padding));
+	padding-bottom: calc(0.5 * var(--primary-nav--padding));
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation .sub-menu .menu-item,
+	.woo-navigation .sub-menu .menu-item {
+		padding-top: calc(0.5 * var(--primary-nav--padding));
+		padding-bottom: calc(0.5 * var(--primary-nav--padding));
+	}
+}
+
+.primary-navigation .sub-menu .menu-item a,
+.woo-navigation .sub-menu .menu-item a {
+	display: inline;
+	font-size: var(--primary-nav--font-size-sub-menu-mobile);
+	font-style: var(--primary-nav--font-style-sub-menu-mobile);
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation .sub-menu .menu-item a,
+	.woo-navigation .sub-menu .menu-item a {
+		font-size: var(--primary-nav--font-size);
+		font-style: var(--primary-nav--font-style);
+	}
+}
+
+.primary-navigation .menu-item-has-children > .svg-icon,
+.woo-navigation .menu-item-has-children > .svg-icon {
+	display: none;
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation .menu-item-has-children > .svg-icon,
+	.woo-navigation .menu-item-has-children > .svg-icon {
+		display: inline-block;
+		height: 100%;
+	}
+}
+
+.primary-navigation .hide-visually,
+.woo-navigation .hide-visually {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+
+@media only screen and (max-width: 829px) {
+	.lock-scrolling .site {
+		right: 0;
+		max-width: 100%;
+		position: fixed;
+		left: 0;
+	}
+}

spearhead/navigation.css

@@ -0,0 +1,475 @@
+/**
+ * Required Variables
+ */
+/**
+ * Required Variables
+ */
+.menu-button-container {
+	display: none;
+	justify-content: space-between;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+
+@media only screen and (max-width: 829px) {
+	.menu-button-container {
+		display: block;
+	}
+}
+
+.lock-scrolling .menu-button-container > .button {
+	position: fixed;
+	top: 0;
+	right: 0;
+}
+
+.menu-button-container #primary-open-menu {
+	margin-left: auto;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-right: calc(0.25 * var(--global--spacing-unit));
+}
+
+.admin-bar.lock-scrolling .menu-button-container > .button,
+.admin-bar:not(.primary-navigation-open) .menu-button-container {
+	top: 46px;
+}
+
+.menu-button-container .button,
+.primary-navigation .button,
+.woo-navigation .button {
+	font-size: var(--primary-nav--font-size);
+	background-color: transparent;
+	color: var(--primary-nav--color-link);
+	z-index: 500;
+}
+
+.menu-button-container .button.open,
+.primary-navigation .button.open,
+.woo-navigation .button.open {
+	display: flex;
+}
+
+.menu-button-container .button.close,
+.primary-navigation .button.close,
+.woo-navigation .button.close {
+	display: none;
+	position: absolute;
+	right: 0;
+	z-index: 501;
+}
+
+.admin-bar .menu-button-container .button.close, .admin-bar
+.primary-navigation .button.close, .admin-bar
+.woo-navigation .button.close {
+	top: -46px;
+}
+
+.menu-button-container .button#woo-open-menu,
+.primary-navigation .button#woo-open-menu,
+.woo-navigation .button#woo-open-menu {
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+}
+
+.menu-button-container .button#woo-open-menu .svg-icon,
+.primary-navigation .button#woo-open-menu .svg-icon,
+.woo-navigation .button#woo-open-menu .svg-icon {
+	margin-left: 0;
+	margin-right: calc(0.25 * var(--global--spacing-unit));
+	vertical-align: middle;
+}
+
+.menu-button-container .button .dropdown-icon,
+.primary-navigation .button .dropdown-icon,
+.woo-navigation .button .dropdown-icon {
+	display: flex;
+	align-items: center;
+}
+
+.menu-button-container .button .dropdown-icon .svg-icon,
+.primary-navigation .button .dropdown-icon .svg-icon,
+.woo-navigation .button .dropdown-icon .svg-icon {
+	margin-left: calc(0.25 * var(--global--spacing-unit));
+}
+
+.menu-button-container .button .dropdown-icon.open .svg-icon,
+.primary-navigation .button .dropdown-icon.open .svg-icon,
+.woo-navigation .button .dropdown-icon.open .svg-icon {
+	position: relative;
+	top: -1px;
+}
+
+.menu-button-container .button .hide-visually,
+.primary-navigation .button .hide-visually,
+.woo-navigation .button .hide-visually {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+
+.primary-navigation-open .menu-button-container #primary-open-menu, .primary-navigation-open
+.primary-navigation #primary-open-menu, .primary-navigation-open
+.woo-navigation #primary-open-menu {
+	display: none;
+}
+
+.primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open
+.primary-navigation #primary-close-menu, .primary-navigation-open
+.woo-navigation #primary-close-menu {
+	display: flex;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-right: calc(0.25 * var(--global--spacing-unit));
+}
+
+.woo-navigation-open .menu-button-container #woo-open-menu, .woo-navigation-open
+.primary-navigation #woo-open-menu, .woo-navigation-open
+.woo-navigation #woo-open-menu {
+	display: none;
+}
+
+.woo-navigation-open .menu-button-container #woo-close-menu, .woo-navigation-open
+.primary-navigation #woo-close-menu, .woo-navigation-open
+.woo-navigation #woo-close-menu {
+	display: flex;
+	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
+	margin-top: calc(0.25 * var(--global--spacing-unit));
+	margin-right: calc(0.25 * var(--global--spacing-unit));
+}
+
+.primary-navigation,
+.woo-navigation {
+	position: absolute;
+	top: 0;
+	right: 0;
+	color: var(--primary-nav--color-text);
+	font-size: var(--primary-nav--font-size);
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+@media only screen and (max-width: 829px) {
+	.primary-navigation,
+	.woo-navigation {
+		width: 100%;
+	}
+}
+
+.primary-navigation > div,
+.woo-navigation > div {
+	visibility: hidden;
+	opacity: 0;
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	padding: calc(4* var(--global--spacing-unit)) var(--global--spacing-unit) var(--global--spacing-horizontal);
+	background-color: var(--global--color-background);
+	overflow-x: hidden;
+	overflow-y: scroll;
+	transition: all .15s ease-in-out;
+	transform: translateY(var(--global--spacing-vertical));
+}
+
+@media only screen and (max-width: 829px) {
+	.primary-navigation > div,
+	.woo-navigation > div {
+		z-index: 499;
+	}
+}
+
+.primary-navigation-open .primary-navigation > .primary-menu-container, .primary-navigation-open
+.woo-navigation > .primary-menu-container {
+	visibility: visible;
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.admin-bar .primary-navigation,
+.admin-bar .primary-navigation > div, .admin-bar
+.woo-navigation,
+.admin-bar
+.woo-navigation > div {
+	top: 46px;
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation,
+	.woo-navigation {
+		position: relative;
+		display: flex;
+		justify-content: var(--primary-nav--justify-content);
+		margin-top: calc( var(--global--spacing-vertical) * 1.5);
+	}
+	.primary-navigation > div,
+	.woo-navigation > div {
+		visibility: visible;
+		opacity: 1;
+		position: relative;
+		padding: 0;
+		background-color: transparent;
+		overflow: initial;
+		transform: none;
+	}
+	.primary-navigation #toggle-menu,
+	.woo-navigation #toggle-menu {
+		display: none;
+	}
+	.primary-navigation > div > ul > li > ul,
+	.woo-navigation > div > ul > li > ul {
+		display: none;
+	}
+	.admin-bar .primary-navigation, .admin-bar
+	.woo-navigation {
+		top: initial;
+	}
+	.admin-bar .primary-navigation > div, .admin-bar
+	.woo-navigation > div {
+		top: initial;
+	}
+}
+
+.primary-navigation > div > ul,
+.woo-navigation > div > ul {
+	display: flex;
+	justify-content: var(--primary-nav--justify-content);
+	flex-wrap: wrap;
+	list-style: none;
+	margin: 0;
+	max-width: none;
+	padding-left: 0;
+	position: relative;
+	/* Sub-menus Flyout */
+}
+
+.primary-navigation > div > ul ul,
+.woo-navigation > div > ul ul {
+	padding-left: 0;
+}
+
+.primary-navigation > div > ul li,
+.woo-navigation > div > ul li {
+	display: block;
+	position: relative;
+	width: 100%;
+	z-index: 1;
+}
+
+.primary-navigation > div > ul li:hover, .primary-navigation > div > ul li:focus-within,
+.woo-navigation > div > ul li:hover,
+.woo-navigation > div > ul li:focus-within {
+	cursor: pointer;
+	z-index: 99999;
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation > div > ul li,
+	.woo-navigation > div > ul li {
+		display: inherit;
+		width: inherit;
+		/* Submenu display */
+	}
+	.primary-navigation > div > ul li:hover > ul,
+	.primary-navigation > div > ul li:focus-within > ul,
+	.primary-navigation > div > ul li ul:hover,
+	.primary-navigation > div > ul li ul:focus,
+	.woo-navigation > div > ul li:hover > ul,
+	.woo-navigation > div > ul li:focus-within > ul,
+	.woo-navigation > div > ul li ul:hover,
+	.woo-navigation > div > ul li ul:focus {
+		visibility: visible;
+		opacity: 1;
+		display: block;
+	}
+}
+
+.primary-navigation > div > ul > li > .sub-menu,
+.woo-navigation > div > ul > li > .sub-menu {
+	position: relative;
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation > div > ul > li > .sub-menu,
+	.woo-navigation > div > ul > li > .sub-menu {
+		margin: 0;
+		background: var(--global--color-background);
+		box-shadow: var(--global--elevation);
+		left: 0;
+		top: calc(100% - (0.5 * var(--primary-nav--padding)));
+		min-width: max-content;
+		opacity: 0;
+		position: absolute;
+		transition: all 0.5s ease;
+		visibility: hidden;
+	}
+}
+
+.primary-navigation > div > ul > li > .sub-menu .sub-menu,
+.woo-navigation > div > ul > li > .sub-menu .sub-menu {
+	width: 100%;
+}
+
+.primary-navigation .primary-menu > .menu-item:hover > a,
+.woo-navigation .primary-menu > .menu-item:hover > a {
+	color: var(--primary-nav--color-link-hover);
+}
+
+.primary-navigation .primary-menu-container > ul > .menu-item,
+.woo-navigation .primary-menu-container > ul > .menu-item {
+	padding: calc(0.5 * var(--primary-nav--padding)) 0;
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation .primary-menu-container > ul > .menu-item,
+	.woo-navigation .primary-menu-container > ul > .menu-item {
+		display: flex;
+		align-items: center;
+		padding: var(--primary-nav--padding);
+	}
+}
+
+.primary-navigation .menu-item > a,
+.woo-navigation .menu-item > a {
+	color: var(--primary-nav--color-link);
+}
+
+.primary-navigation .menu-item > a:hover,
+.woo-navigation .menu-item > a:hover {
+	color: var(--primary-nav--color-link-hover);
+	border-color: var(--global--color-secondary);
+}
+
+.primary-navigation .menu-item > a:focus,
+.woo-navigation .menu-item > a:focus {
+	color: var(--global--color-secondary);
+}
+
+.primary-navigation .menu-item > a:active,
+.woo-navigation .menu-item > a:active {
+	color: var(--primary-nav--color-link);
+}
+
+.primary-navigation a,
+.woo-navigation a {
+	color: currentColor;
+	display: inline;
+	font-family: var(--primary-nav--font-family-mobile);
+	font-size: var(--primary-nav--font-size-mobile);
+	font-weight: var(--primary-nav--font-weight);
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation a,
+	.woo-navigation a {
+		display: block;
+		font-family: var(--primary-nav--font-family);
+		font-size: var(--primary-nav--font-size);
+		font-weight: var(--primary-nav--font-weight);
+	}
+}
+
+.primary-navigation a + svg,
+.woo-navigation a + svg {
+	fill: currentColor;
+}
+
+.primary-navigation a:hover, .primary-navigation a:link, .primary-navigation a:visited,
+.woo-navigation a:hover,
+.woo-navigation a:link,
+.woo-navigation a:visited {
+	color: currentColor;
+}
+
+.primary-navigation .sub-menu,
+.woo-navigation .sub-menu {
+	list-style: none;
+	margin-left: var(--primary-nav--padding);
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation .sub-menu,
+	.woo-navigation .sub-menu {
+		padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
+	}
+	.primary-navigation .sub-menu > .menu-item > .sub-menu,
+	.woo-navigation .sub-menu > .menu-item > .sub-menu {
+		padding: 0;
+	}
+	.primary-navigation .sub-menu > .menu-item.menu-item-has-children,
+	.woo-navigation .sub-menu > .menu-item.menu-item-has-children {
+		padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding) 0 0;
+	}
+}
+
+.primary-navigation .sub-menu .menu-item,
+.woo-navigation .sub-menu .menu-item {
+	padding-top: calc(0.5 * var(--primary-nav--padding));
+	padding-bottom: calc(0.5 * var(--primary-nav--padding));
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation .sub-menu .menu-item,
+	.woo-navigation .sub-menu .menu-item {
+		padding-top: calc(0.5 * var(--primary-nav--padding));
+		padding-bottom: calc(0.5 * var(--primary-nav--padding));
+	}
+}
+
+.primary-navigation .sub-menu .menu-item a,
+.woo-navigation .sub-menu .menu-item a {
+	display: inline;
+	font-size: var(--primary-nav--font-size-sub-menu-mobile);
+	font-style: var(--primary-nav--font-style-sub-menu-mobile);
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation .sub-menu .menu-item a,
+	.woo-navigation .sub-menu .menu-item a {
+		font-size: var(--primary-nav--font-size);
+		font-style: var(--primary-nav--font-style);
+	}
+}
+
+.primary-navigation .menu-item-has-children > .svg-icon,
+.woo-navigation .menu-item-has-children > .svg-icon {
+	display: none;
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation .menu-item-has-children > .svg-icon,
+	.woo-navigation .menu-item-has-children > .svg-icon {
+		display: inline-block;
+		height: 100%;
+	}
+}
+
+.primary-navigation .hide-visually,
+.woo-navigation .hide-visually {
+	position: absolute !important;
+	clip: rect(1px, 1px, 1px, 1px);
+	padding: 0 !important;
+	border: 0 !important;
+	height: 1px !important;
+	width: 1px !important;
+	overflow: hidden;
+}
+
+@media only screen and (max-width: 829px) {
+	.lock-scrolling .site {
+		left: 0;
+		max-width: 100%;
+		position: fixed;
+		right: 0;
+	}
+}
+
+/*# sourceMappingURL=navigation.css.map */

spearhead/package.json

@@ -12,15 +12,17 @@
   "devDependencies": {
     "@wordpress/browserslist-config": "^2.2.2",
     "chokidar-cli": "^2.1.0",
+    "minimist": "^1.2.2",
     "node-sass": "^4.13.1",
     "npm-run-all": "^4.1.5",
-    "minimist": "^1.2.2",
     "rtlcss": "^2.4.0"
   },
   "scripts": {
     "start": "npm run watch",
     "build:style": "node-sass assets/sass/style.scss style.css --output-style expanded --indent-type tab --indent-width 1  --source-map true",
+    "build:navigation": "node-sass assets/sass/navigation.scss navigation.css --output-style expanded --indent-type tab --indent-width 1  --source-map true",
     "build:rtl": "rtlcss style.css style-rtl.css",
+    "build:navigation-rtl": "rtlcss navigation.css navigation-rtl.css",
     "build": "run-s \"build:*\"",
     "watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial"
   }

spearhead/style-rtl.css

@@ -4,22 +4,27 @@ Theme URI: https://github.com/Automattic/themes/root-child
 Author: Automattic
 Author URI: https://automattic.com/
 Description: Share your podcast with the world using Spearhead.
-Requires at least: WordPress 5.4 
+Requires at least: WordPress 5.4
 Version: 1.2.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: seedlet
-Text Domain: spearhead 
+Text Domain: spearhead
 Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 */
 /**
- * Repsonsive Styles
+ * Required Variables
  */
 /**
  * Required Variables
  */
+/**
+ * Repsonsive Styles
+ */
 @media only screen and (min-width: 830px) {
 	:root {
+		--global--spacing-horizontal: 60px;
+		--global--spacing-vertical: 35px;
 		--responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 782px);
 		--responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 1247px);
 	}
@@ -92,9 +97,13 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	font-weight: 500;
 }
 
+.has-main-navigation .site-header {
+	padding: var(--global--spacing-horizontal) var(--global--spacing-horizontal);
+}
+
 @media only screen and (max-width: 481px) {
-	.has-main-navigation .site-header {
-		padding-top: 4px;
+	.has-main-navigation .site-header .site-title {
+		margin: 0;
 	}
 	.has-main-navigation .site-header .site-description {
 		display: none;
@@ -107,8 +116,15 @@ 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--alignwide-width);
+	max-width: var(--responsive--alignfull-width);
+}
+
+@media only screen and (max-width: 481px) {
+	.site-header {
+		align-items: center;
+	}
 }
 
 .site-header .site-branding {
@@ -123,21 +139,102 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .primary-navigation {
 	flex-grow: 4;
-	justify-content: flex-end;
 	margin-top: 0;
 }
 
+@media only screen and (max-width: 829px) {
+	.site-header .primary-navigation .primary-menu-container {
+		background: var(--primary-nav--color-background);
+		padding: var(--global--spacing-unit);
+		top: 68px;
+	}
+	.admin-bar .site-header .primary-navigation .primary-menu-container {
+		top: 114px;
+	}
+	.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-secondary);
+	position: fixed;
+	top: 0;
+	left: 0;
+}
+
+.admin-bar .site-header .primary-navigation button#primary-close-menu {
+	top: 46px;
+}
+
+.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;
 }
 
 .site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
 	color: var(--global--color-secondary);
-	margin: 6px calc( var(--global--spacing-horizontal) / 2);
+	margin: 6px;
+	padding: var(--social-nav--padding);
+}
+
+.site-header .primary-navigation > div > ul li a:hover, .site-header .woo-navigation > div > ul li a:hover {
+	border-color: transparent;
+	color: var(--global--color-primary);
 }
 
 .site-header > .site-branding, .site-header > nav {
-	margin: 0 calc( var( --global--spacing-horizontal ) / 2);
+	margin: 0;
+}
+
+.site-header .social-navigation {
+	flex-basis: 100%;
+}
+
+.site-header .social-navigation ul {
+	justify-content: flex-start;
+	flex-wrap: nowrap;
+	margin-top: var(--global--spacing-vertical);
+}
+
+.site-header .social-navigation ul li {
+	margin: 0;
+	padding: 0 0 0 var(--social-nav--padding);
+}
+
+@media only screen and (min-width: 830px) {
+	.site-header .social-navigation {
+		flex-basis: auto;
+	}
+	.site-header .social-navigation ul {
+		justify-content: flex-end;
+		margin-top: 0;
+	}
+	.site-header .social-navigation ul li {
+		padding: 0 var(--social-nav--padding) 0 0;
+	}
+}
+
+.site-header .social-navigation li:first-of-type > a,
+.site-header .social-navigation a {
+	padding: 0;
+}
+
+.site-header .social-navigation li:first-of-type > a:hover,
+.site-header .social-navigation a:hover {
+	border-color: transparent;
+	color: var(--global--color-primary);
+}
+
+.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 {

spearhead/style.css

@@ -4,22 +4,27 @@ Theme URI: https://github.com/Automattic/themes/root-child
 Author: Automattic
 Author URI: https://automattic.com/
 Description: Share your podcast with the world using Spearhead.
-Requires at least: WordPress 5.4 
+Requires at least: WordPress 5.4
 Version: 1.2.1
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: seedlet
-Text Domain: spearhead 
+Text Domain: spearhead
 Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready, auto-loading-homepage, jetpack-global-styles
 */
 /**
- * Repsonsive Styles
+ * Required Variables
  */
 /**
  * Required Variables
  */
+/**
+ * Repsonsive Styles
+ */
 @media only screen and (min-width: 830px) {
 	:root {
+		--global--spacing-horizontal: 60px;
+		--global--spacing-vertical: 35px;
 		--responsive--aligndefault-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 782px);
 		--responsive--alignwide-width: min(calc(100vw - 2 * var(--global--spacing-horizontal)), 1247px);
 	}
@@ -92,9 +97,13 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	font-weight: 500;
 }
 
+.has-main-navigation .site-header {
+	padding: var(--global--spacing-horizontal) var(--global--spacing-horizontal);
+}
+
 @media only screen and (max-width: 481px) {
-	.has-main-navigation .site-header {
-		padding-top: 4px;
+	.has-main-navigation .site-header .site-title {
+		margin: 0;
 	}
 	.has-main-navigation .site-header .site-description {
 		display: none;
@@ -107,8 +116,15 @@ 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--alignwide-width);
+	max-width: var(--responsive--alignfull-width);
+}
+
+@media only screen and (max-width: 481px) {
+	.site-header {
+		align-items: center;
+	}
 }
 
 .site-header .site-branding {
@@ -123,21 +139,102 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .primary-navigation {
 	flex-grow: 4;
-	justify-content: flex-end;
 	margin-top: 0;
 }
 
+@media only screen and (max-width: 829px) {
+	.site-header .primary-navigation .primary-menu-container {
+		background: var(--primary-nav--color-background);
+		padding: var(--global--spacing-unit);
+		top: 68px;
+	}
+	.admin-bar .site-header .primary-navigation .primary-menu-container {
+		top: 114px;
+	}
+	.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-secondary);
+	position: fixed;
+	top: 0;
+	right: 0;
+}
+
+.admin-bar .site-header .primary-navigation button#primary-close-menu {
+	top: 46px;
+}
+
+.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;
 }
 
 .site-header .primary-navigation > div > ul li, .site-header .woo-navigation > div > ul li {
 	color: var(--global--color-secondary);
-	margin: 6px calc( var(--global--spacing-horizontal) / 2);
+	margin: 6px;
+	padding: var(--social-nav--padding);
+}
+
+.site-header .primary-navigation > div > ul li a:hover, .site-header .woo-navigation > div > ul li a:hover {
+	border-color: transparent;
+	color: var(--global--color-primary);
 }
 
 .site-header > .site-branding, .site-header > nav {
-	margin: 0 calc( var( --global--spacing-horizontal ) / 2);
+	margin: 0;
+}
+
+.site-header .social-navigation {
+	flex-basis: 100%;
+}
+
+.site-header .social-navigation ul {
+	justify-content: flex-start;
+	flex-wrap: nowrap;
+	margin-top: var(--global--spacing-vertical);
+}
+
+.site-header .social-navigation ul li {
+	margin: 0;
+	padding: 0 var(--social-nav--padding) 0 0;
+}
+
+@media only screen and (min-width: 830px) {
+	.site-header .social-navigation {
+		flex-basis: auto;
+	}
+	.site-header .social-navigation ul {
+		justify-content: flex-end;
+		margin-top: 0;
+	}
+	.site-header .social-navigation ul li {
+		padding: 0 0 0 var(--social-nav--padding);
+	}
+}
+
+.site-header .social-navigation li:first-of-type > a,
+.site-header .social-navigation a {
+	padding: 0;
+}
+
+.site-header .social-navigation li:first-of-type > a:hover,
+.site-header .social-navigation a:hover {
+	border-color: transparent;
+	color: var(--global--color-primary);
+}
+
+.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 {

spearhead/variables.css

@@ -21,6 +21,8 @@
 	--global--font-size-xl: 48px;
 	/* Spacing */
 	--global--spacing-horizontal: 24px;
+	--global--spacing-vertical: 27px;
+	--global--content-width: 900px;
 	/* Line Height */
 	--global--line-height-base: 1;
 	--global--line-height-body: 1.7;
@@ -56,13 +58,15 @@
 	--branding--title--font-size: var(--global--font-size-lg);
 	--branding--title--font-size-mobile: var(--global--font-size-root);
 
-	--primary-nav--justify-content: space-between;
+	--primary-nav--justify-content: flex-end;
 	--primary-nav--color-link: var(--global--color-secondary);
+	--primary-nav--color-background: var(--global--color-foreground);
 	--primary-nav--padding: 0px;
 	--primary-nav--font-family-mobile: var(--global--font-family-secondary);
 	--primary-nav--font-size-mobile: var(--global--font-size-sm);
+	--primary-nav--font-size-sub-menu-mobile: var( --primary-nav--font-size-mobile );
 
-	--social-nav--padding: calc( .67 * var(--global--spacing-unit) );
+	--social-nav--padding: var(--global--spacing-unit);
 
 	--pullquote--font-style: normal;
 	--pullquote--letter-spacing: 0;