Merge pull request #2720 from Automattic/update/spearhead-menu-2

Spearhead: Try a different approach for Spearhead navigation

seedlet/assets/css/style-editor.css

@@ -176,6 +176,7 @@
 	--primary-nav--font-style-sub-menu-mobile: italic;
 	--primary-nav--font-weight: normal;
 	--primary-nav--line-height: var(--global--line-height-body);
+	--primary-nav--color-border: var(--global--color-secondary);
 	--primary-nav--color-link: var(--global--color-primary);
 	--primary-nav--color-link-hover: var(--global--color-primary-hover);
 	--primary-nav--color-text: var(--global--color-foreground);

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

@@ -287,8 +287,8 @@
 	}
 }
 
-.primary-navigation > div > ul,
-.woo-navigation > div > ul {
+.primary-navigation div > ul,
+.woo-navigation div > ul {
 	display: flex;
 	justify-content: var(--primary-nav--justify-content);
 	flex-wrap: wrap;
@@ -300,55 +300,55 @@
 	/* Sub-menus Flyout */
 }
 
-.primary-navigation > div > ul ul,
-.woo-navigation > div > ul ul {
+.primary-navigation div > ul ul,
+.woo-navigation div > ul ul {
 	padding-right: 0;
 }
 
-.primary-navigation > div > ul li,
-.woo-navigation > div > ul li {
+.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 {
+.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: 482px) {
-	.primary-navigation > div > ul li,
-	.woo-navigation > div > ul li {
+	.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 {
+	.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 {
+.primary-navigation div > ul > li > .sub-menu,
+.woo-navigation div > ul > li > .sub-menu {
 	position: relative;
 }
 
 @media only screen and (min-width: 482px) {
-	.primary-navigation > div > ul > li > .sub-menu,
-	.woo-navigation > div > ul > li > .sub-menu {
+	.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);
@@ -362,8 +362,8 @@
 	}
 }
 
-.primary-navigation > div > ul > li > .sub-menu .sub-menu,
-.woo-navigation > div > ul > li > .sub-menu .sub-menu {
+.primary-navigation div > ul > li > .sub-menu .sub-menu,
+.woo-navigation div > ul > li > .sub-menu .sub-menu {
 	width: 100%;
 }
 
@@ -394,7 +394,7 @@
 .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);
+	border-color: var(--primary-nav--color-border);
 }
 
 .primary-navigation .menu-item > a:focus,

seedlet/assets/css/style-navigation.css

@@ -287,8 +287,8 @@
 	}
 }
 
-.primary-navigation > div > ul,
-.woo-navigation > div > ul {
+.primary-navigation div > ul,
+.woo-navigation div > ul {
 	display: flex;
 	justify-content: var(--primary-nav--justify-content);
 	flex-wrap: wrap;
@@ -300,55 +300,55 @@
 	/* Sub-menus Flyout */
 }
 
-.primary-navigation > div > ul ul,
-.woo-navigation > div > ul ul {
+.primary-navigation div > ul ul,
+.woo-navigation div > ul ul {
 	padding-left: 0;
 }
 
-.primary-navigation > div > ul li,
-.woo-navigation > div > ul li {
+.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 {
+.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: 482px) {
-	.primary-navigation > div > ul li,
-	.woo-navigation > div > ul li {
+	.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 {
+	.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 {
+.primary-navigation div > ul > li > .sub-menu,
+.woo-navigation div > ul > li > .sub-menu {
 	position: relative;
 }
 
 @media only screen and (min-width: 482px) {
-	.primary-navigation > div > ul > li > .sub-menu,
-	.woo-navigation > div > ul > li > .sub-menu {
+	.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);
@@ -362,8 +362,8 @@
 	}
 }
 
-.primary-navigation > div > ul > li > .sub-menu .sub-menu,
-.woo-navigation > div > ul > li > .sub-menu .sub-menu {
+.primary-navigation div > ul > li > .sub-menu .sub-menu,
+.woo-navigation div > ul > li > .sub-menu .sub-menu {
 	width: 100%;
 }
 
@@ -394,7 +394,7 @@
 .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);
+	border-color: var(--primary-nav--color-border);
 }
 
 .primary-navigation .menu-item > a:focus,

seedlet/assets/sass/components/header/_config.scss

@@ -24,6 +24,7 @@
 	--primary-nav--font-style-sub-menu-mobile: italic;
 	--primary-nav--font-weight: normal;
 	--primary-nav--line-height: var(--global--line-height-body);
+	--primary-nav--color-border: var(--global--color-secondary);
 	--primary-nav--color-link: var(--global--color-primary);
 	--primary-nav--color-link-hover: var(--global--color-primary-hover);
 	--primary-nav--color-text: var(--global--color-foreground);

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

@@ -239,7 +239,7 @@
 	}
 
 	// Menu list wrapper
-	& > div > ul {
+	& div > ul {
 		display: flex;
 		justify-content: var(--primary-nav--justify-content);
 		flex-wrap: wrap;
@@ -327,7 +327,7 @@
 
 		&:hover {
 			color: var(--primary-nav--color-link-hover);
-			border-color: var(--global--color-secondary);
+			border-color: var(--primary-nav--color-border);
 		}
 
 		&:focus {

seedlet/style-rtl.css

@@ -241,6 +241,7 @@ Included in theme screenshot and in block patterns.
 	--primary-nav--font-style-sub-menu-mobile: italic;
 	--primary-nav--font-weight: normal;
 	--primary-nav--line-height: var(--global--line-height-body);
+	--primary-nav--color-border: var(--global--color-secondary);
 	--primary-nav--color-link: var(--global--color-primary);
 	--primary-nav--color-link-hover: var(--global--color-primary-hover);
 	--primary-nav--color-text: var(--global--color-foreground);

seedlet/style.css

@@ -241,6 +241,7 @@ Included in theme screenshot and in block patterns.
 	--primary-nav--font-style-sub-menu-mobile: italic;
 	--primary-nav--font-weight: normal;
 	--primary-nav--line-height: var(--global--line-height-body);
+	--primary-nav--color-border: var(--global--color-secondary);
 	--primary-nav--color-link: var(--global--color-primary);
 	--primary-nav--color-link-hover: var(--global--color-primary-hover);
 	--primary-nav--color-text: var(--global--color-foreground);

spearhead/assets/sass/_header.scss

@@ -4,6 +4,10 @@ $site-branding-height: 68px;
 .has-main-navigation {
 	.site-header {
 		padding: var(--global--spacing-horizontal);
+		a {
+			border-bottom: 1px solid transparent;
+		}
+
 		@include media( laptop ){
 			padding: 35px var(--global--spacing-horizontal);
 		}
@@ -50,18 +54,23 @@ $site-branding-height: 68px;
 				text-shadow: none;
 			}
 		}
+
+		.site-logo {
+			margin-left: 0;
+			margin-top: 0;
+		}
 	}
 
 	.primary-navigation {
 		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 {
-				background: var(--primary-nav--color-background);
-				padding: var(--global--spacing-unit);
-				top: $site-branding-height;
-
 				.admin-bar & {
 					top: $site-branding-height + $admin-bar-height;
 				}
@@ -98,8 +107,6 @@ $site-branding-height: 68px;
 
 	.primary-navigation > div > ul li, .woo-navigation > div > ul li {
 		color: var(--global--color-secondary);
-		//margin: 6px 8px;
-		//padding: var(--social-nav--padding);
 
 		a:hover {
 			border-color: transparent;
@@ -137,13 +144,16 @@ $site-branding-height: 68px;
 			}
 		}
 
-		li:first-of-type > a,
-		a {
-			padding: 0;
+		.menu-item {
+			width: auto;
 
-			&:hover {
-				border-color: transparent;
-				color: var(--global--color-primary);
+			> a {
+				padding: 0;
+
+				&:hover {
+					border-color: var(--primary-nav--color-border);
+					color: var(--primary-nav--color-link-hover);
+				}
 			}
 		}
 	}

spearhead/assets/sass/_responsive.scss

@@ -7,5 +7,6 @@
 		--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});
+		--wpadmin-bar--height: 32px;
 	}
 }

spearhead/assets/sass/navigation.scss

@@ -11,9 +11,24 @@ $navigation-max-break-point: 'laptop-only';
 
 .primary-navigation,
 .woo-navigation {
-	.sub-menu {
+	// Top-level Menu Item
+	.primary-menu-container > ul > .menu-item {
+		padding: 0;
+
+		@include media( $navigation-min-break-point ) {
+			padding: 0 var(--primary-nav--padding);
+
+			&:last-child {
+				padding-right: 0;
+			}
+
+		}
+	}
+
+	& div ul > li > .sub-menu {
 		@include media( $navigation-min-break-point ) {
 			padding: calc(0.5 * var(--primary-nav--padding)) calc( 2 * var(--primary-nav--padding) );
+			transition: all 0.15s ease;
 
 			> .menu-item.menu-item-has-children {
 				padding: calc(0.5 * var(--primary-nav--padding)) calc( 2 * var(--primary-nav--padding) ) 0 0;
@@ -21,3 +36,29 @@ $navigation-max-break-point: 'laptop-only';
 		}
 	}
 }
+
+.social-navigation > div {
+	ul li {
+		width: auto;
+	}
+}
+
+
+$header-height: 80px;
+div.extra-navigation-wrapper {
+	@include media( $navigation-max-break-point ) {
+		background: var(--primary-nav--color-background);
+		padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
+		top: 0;
+		right: 0;
+		bottom: $header-height;
+		left: 0;
+		transform: translateY( 90px ); // This can be any value > $header-height
+	}
+
+	.primary-navigation-open & {
+		visibility: visible;
+		opacity: 1;
+		transform: translateY( $header-height );
+	}
+}

spearhead/header.php

@@ -0,0 +1,120 @@
+<?php
+/**
+ * The header for our theme
+ *
+ * This is the template that displays all of the <head> section and everything up until <div id="content">
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
+ *
+ * @package Spearhead
+ * @since 1.0.0
+ */
+?><!doctype html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="profile" href="https://gmpg.org/xfn/11" />
+	<?php wp_head(); ?>
+</head>
+
+<body <?php body_class(); ?>>
+<?php wp_body_open(); ?>
+<div id="page" class="site">
+	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'seedlet' ); ?></a>
+
+		<header id="masthead" class="site-header default-max-width" role="banner">
+			<?php get_template_part( 'template-parts/header/site-branding' ); ?>
+
+			<?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>
+				<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>
+					<div class="extra-navigation-wrapper">
+						<?php
+						if ( has_nav_menu( 'primary' ) ) :
+							// 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; ?>
+
+			<div class="menu-button-container">
+				<?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>
+				<?php endif; ?>
+			</div>
+
+			<?php if ( class_exists( 'WooCommerce' ) ) : ?>
+				<nav class="woo-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Woo Minicart', 'seedlet' ); ?>">
+					<?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', 'seedlet' ),
+						seedlet_get_icon_svg( 'close' ),
+						esc_html__( 'collapsed', 'seedlet' ),
+						is_cart() ? 'current-menu-item' : '',
+						esc_attr__( 'View your shopping cart', 'seedlet' ),
+						seedlet_cart_link(),
+						esc_attr__( 'View your shopping list', 'seedlet' ),
+						seedlet_cart_widget()
+					) );
+					?>
+				</nav><!-- .woo-navigation -->
+			<?php endif; ?>
+
+			<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', 'seedlet' ); ?></span>
+						<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'seedlet' ); ?></span>
+					</button>
+				<?php endif; ?>
+			</div>
+
+		</header><!-- #masthead -->
+
+	<div id="content" class="site-content">

spearhead/navigation-rtl.css

@@ -290,8 +290,8 @@
 	}
 }
 
-.primary-navigation > div > ul,
-.woo-navigation > div > ul {
+.primary-navigation div > ul,
+.woo-navigation div > ul {
 	display: flex;
 	justify-content: var(--primary-nav--justify-content);
 	flex-wrap: wrap;
@@ -303,55 +303,55 @@
 	/* Sub-menus Flyout */
 }
 
-.primary-navigation > div > ul ul,
-.woo-navigation > div > ul ul {
+.primary-navigation div > ul ul,
+.woo-navigation div > ul ul {
 	padding-right: 0;
 }
 
-.primary-navigation > div > ul li,
-.woo-navigation > div > ul li {
+.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 {
+.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 {
+	.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 {
+	.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 {
+.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 {
+	.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);
@@ -365,8 +365,8 @@
 	}
 }
 
-.primary-navigation > div > ul > li > .sub-menu .sub-menu,
-.woo-navigation > div > ul > li > .sub-menu .sub-menu {
+.primary-navigation div > ul > li > .sub-menu .sub-menu,
+.woo-navigation div > ul > li > .sub-menu .sub-menu {
 	width: 100%;
 }
 
@@ -397,7 +397,7 @@
 .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);
+	border-color: var(--primary-nav--color-border);
 }
 
 .primary-navigation .menu-item > a:focus,
@@ -524,13 +524,52 @@
 	}
 }
 
+.primary-navigation .primary-menu-container > ul > .menu-item,
+.woo-navigation .primary-menu-container > ul > .menu-item {
+	padding: 0;
+}
+
 @media only screen and (min-width: 830px) {
-	.primary-navigation .sub-menu,
-	.woo-navigation .sub-menu {
+	.primary-navigation .primary-menu-container > ul > .menu-item,
+	.woo-navigation .primary-menu-container > ul > .menu-item {
+		padding: 0 var(--primary-nav--padding);
+	}
+	.primary-navigation .primary-menu-container > ul > .menu-item:last-child,
+	.woo-navigation .primary-menu-container > ul > .menu-item:last-child {
+		padding-left: 0;
+	}
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation div ul > li > .sub-menu,
+	.woo-navigation div ul > li > .sub-menu {
 		padding: calc(0.5 * var(--primary-nav--padding)) calc( 2 * var(--primary-nav--padding));
+		transition: all 0.15s ease;
 	}
-	.primary-navigation .sub-menu > .menu-item.menu-item-has-children,
-	.woo-navigation .sub-menu > .menu-item.menu-item-has-children {
+	.primary-navigation div ul > li > .sub-menu > .menu-item.menu-item-has-children,
+	.woo-navigation div ul > li > .sub-menu > .menu-item.menu-item-has-children {
 		padding: calc(0.5 * var(--primary-nav--padding)) 0 0 calc( 2 * var(--primary-nav--padding));
 	}
+}
+
+.social-navigation > div ul li {
+	width: auto;
+}
+
+@media only screen and (max-width: 829px) {
+	div.extra-navigation-wrapper {
+		background: var(--primary-nav--color-background);
+		padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
+		top: 0;
+		left: 0;
+		bottom: 80px;
+		right: 0;
+		transform: translateY(90px);
+	}
+}
+
+.primary-navigation-open div.extra-navigation-wrapper {
+	visibility: visible;
+	opacity: 1;
+	transform: translateY(80px);
 }

spearhead/navigation.css

@@ -290,8 +290,8 @@
 	}
 }
 
-.primary-navigation > div > ul,
-.woo-navigation > div > ul {
+.primary-navigation div > ul,
+.woo-navigation div > ul {
 	display: flex;
 	justify-content: var(--primary-nav--justify-content);
 	flex-wrap: wrap;
@@ -303,55 +303,55 @@
 	/* Sub-menus Flyout */
 }
 
-.primary-navigation > div > ul ul,
-.woo-navigation > div > ul ul {
+.primary-navigation div > ul ul,
+.woo-navigation div > ul ul {
 	padding-left: 0;
 }
 
-.primary-navigation > div > ul li,
-.woo-navigation > div > ul li {
+.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 {
+.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 {
+	.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 {
+	.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 {
+.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 {
+	.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);
@@ -365,8 +365,8 @@
 	}
 }
 
-.primary-navigation > div > ul > li > .sub-menu .sub-menu,
-.woo-navigation > div > ul > li > .sub-menu .sub-menu {
+.primary-navigation div > ul > li > .sub-menu .sub-menu,
+.woo-navigation div > ul > li > .sub-menu .sub-menu {
 	width: 100%;
 }
 
@@ -397,7 +397,7 @@
 .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);
+	border-color: var(--primary-nav--color-border);
 }
 
 .primary-navigation .menu-item > a:focus,
@@ -524,15 +524,54 @@
 	}
 }
 
+.primary-navigation .primary-menu-container > ul > .menu-item,
+.woo-navigation .primary-menu-container > ul > .menu-item {
+	padding: 0;
+}
+
 @media only screen and (min-width: 830px) {
-	.primary-navigation .sub-menu,
-	.woo-navigation .sub-menu {
+	.primary-navigation .primary-menu-container > ul > .menu-item,
+	.woo-navigation .primary-menu-container > ul > .menu-item {
+		padding: 0 var(--primary-nav--padding);
+	}
+	.primary-navigation .primary-menu-container > ul > .menu-item:last-child,
+	.woo-navigation .primary-menu-container > ul > .menu-item:last-child {
+		padding-right: 0;
+	}
+}
+
+@media only screen and (min-width: 830px) {
+	.primary-navigation div ul > li > .sub-menu,
+	.woo-navigation div ul > li > .sub-menu {
 		padding: calc(0.5 * var(--primary-nav--padding)) calc( 2 * var(--primary-nav--padding));
+		transition: all 0.15s ease;
 	}
-	.primary-navigation .sub-menu > .menu-item.menu-item-has-children,
-	.woo-navigation .sub-menu > .menu-item.menu-item-has-children {
+	.primary-navigation div ul > li > .sub-menu > .menu-item.menu-item-has-children,
+	.woo-navigation div ul > li > .sub-menu > .menu-item.menu-item-has-children {
 		padding: calc(0.5 * var(--primary-nav--padding)) calc( 2 * var(--primary-nav--padding)) 0 0;
 	}
 }
 
+.social-navigation > div ul li {
+	width: auto;
+}
+
+@media only screen and (max-width: 829px) {
+	div.extra-navigation-wrapper {
+		background: var(--primary-nav--color-background);
+		padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
+		top: 0;
+		right: 0;
+		bottom: 80px;
+		left: 0;
+		transform: translateY(90px);
+	}
+}
+
+.primary-navigation-open div.extra-navigation-wrapper {
+	visibility: visible;
+	opacity: 1;
+	transform: translateY(80px);
+}
+
 /*# sourceMappingURL=navigation.css.map */

spearhead/style-rtl.css

@@ -52,6 +52,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 		--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);
+		--wpadmin-bar--height: 32px;
 	}
 }
 
@@ -191,6 +192,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	padding: var(--global--spacing-horizontal);
 }
 
+.has-main-navigation .site-header a {
+	border-bottom: 1px solid transparent;
+}
+
 @media only screen and (min-width: 830px) {
 	.has-main-navigation .site-header {
 		padding: 35px var(--global--spacing-horizontal);
@@ -243,17 +248,21 @@ 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;
+}
+
 .site-header .primary-navigation {
 	flex-grow: 4;
 	margin-top: 0;
 }
 
+.site-header .primary-navigation .primary-menu-container {
+	margin-bottom: 6px;
+}
+
 @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;
 	}
@@ -325,15 +334,17 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
-.site-header .social-navigation li:first-of-type > a,
-.site-header .social-navigation a {
+.site-header .social-navigation .menu-item {
+	width: auto;
+}
+
+.site-header .social-navigation .menu-item > 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 .social-navigation .menu-item > a:hover {
+	border-color: var(--primary-nav--color-border);
+	color: var(--primary-nav--color-link-hover);
 }
 
 .site-header div.menu-button-container button#primary-open-menu {

spearhead/style.css

@@ -52,6 +52,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 		--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);
+		--wpadmin-bar--height: 32px;
 	}
 }
 
@@ -191,6 +192,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	padding: var(--global--spacing-horizontal);
 }
 
+.has-main-navigation .site-header a {
+	border-bottom: 1px solid transparent;
+}
+
 @media only screen and (min-width: 830px) {
 	.has-main-navigation .site-header {
 		padding: 35px var(--global--spacing-horizontal);
@@ -243,17 +248,21 @@ 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;
+}
+
 .site-header .primary-navigation {
 	flex-grow: 4;
 	margin-top: 0;
 }
 
+.site-header .primary-navigation .primary-menu-container {
+	margin-bottom: 6px;
+}
+
 @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;
 	}
@@ -325,15 +334,17 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	}
 }
 
-.site-header .social-navigation li:first-of-type > a,
-.site-header .social-navigation a {
+.site-header .social-navigation .menu-item {
+	width: auto;
+}
+
+.site-header .social-navigation .menu-item > 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 .social-navigation .menu-item > a:hover {
+	border-color: var(--primary-nav--color-border);
+	color: var(--primary-nav--color-link-hover);
 }
 
 .site-header div.menu-button-container button#primary-open-menu {

spearhead/variables.css

@@ -69,6 +69,8 @@
 
 	--primary-nav--justify-content: flex-end;
 	--primary-nav--color-link: var(--global--color-secondary);
+	--primary-nav--color-link-hover: var(--global--color-primary);
+	--primary-nav--color-border: transparent;
 	--primary-nav--dropdown-color-link: var(--global--color-background);
 	--primary-nav--color-background: var(--global--color-foreground);
 	--primary-nav--padding: 6px;