Spearhead: Try a different approach for Spearhead

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%;
 }
 

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%;
 }
 

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;

spearhead/assets/sass/_header.scss

@@ -53,9 +53,9 @@ $site-branding-height: 68px;
 
 		@include media( laptop-only ){ // TODO - use $navigation-max-break-point variable
 			.primary-menu-container {
-				background: var(--primary-nav--color-background);
+				/*background: var(--primary-nav--color-background);
 				padding: var(--global--spacing-unit);
-				top: $site-branding-height;
+				top: $site-branding-height;*/
 
 				.admin-bar & {
 					top: $site-branding-height + $admin-bar-height;

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,6 +11,20 @@ $navigation-max-break-point: 'laptop-only';
 
 .primary-navigation,
 .woo-navigation {
+	// 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;
+			}
+
+		}
+	}
+
 	.sub-menu {
 		@include media( $navigation-min-break-point ) {
 			padding: calc(0.5 * var(--primary-nav--padding)) calc( 2 * var(--primary-nav--padding) );
@@ -21,3 +35,20 @@ $navigation-max-break-point: 'laptop-only';
 		}
 	}
 }
+
+.social-navigation > div {
+	ul li {
+		width: auto;
+	}
+}
+
+.primary-navigation-open .extra-navigation-wrapper {
+	background: var(--primary-nav--color-background);
+	padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
+	visibility: visible;
+	opacity: 1;
+	top: 50px; // TODO adjust with admin bad
+	right: 0;
+	bottom: 30px; //Not sure why this div is offset by 30px
+	left: 0;
+}

spearhead/header.php

@@ -0,0 +1,121 @@
+<?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 Seedlet
+ * @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' ) ) : ?>
+				<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
+						// 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>',
+							)
+						);
+						?>
+						<?php if ( has_nav_menu( 'social' ) ) : ?>
+							<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'seedlet' ); ?>">
+								<?php
+								wp_nav_menu(
+									array(
+										'theme_location' => 'social',
+										'link_before'    => '<span class="screen-reader-text">',
+										'link_after'     => '</span>' . seedlet_get_icon_svg( 'link' ),
+										'depth'          => 1,
+									)
+								);
+								?>
+							</nav><!-- .social-navigation -->
+						<?php 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%;
 }
 
@@ -524,6 +524,22 @@
 	}
 }
 
+.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 .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 .sub-menu,
 	.woo-navigation .sub-menu {
@@ -533,4 +549,19 @@
 	.woo-navigation .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;
+}
+
+.primary-navigation-open .extra-navigation-wrapper {
+	background: var(--primary-nav--color-background);
+	padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
+	visibility: visible;
+	opacity: 1;
+	top: 50px;
+	left: 0;
+	bottom: 30px;
+	right: 0;
 }

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%;
 }
 
@@ -524,6 +524,22 @@
 	}
 }
 
+.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 .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 .sub-menu,
 	.woo-navigation .sub-menu {
@@ -535,4 +551,19 @@
 	}
 }
 
+.social-navigation > div ul li {
+	width: auto;
+}
+
+.primary-navigation-open .extra-navigation-wrapper {
+	background: var(--primary-nav--color-background);
+	padding: var(--global--spacing-unit) var(--global--spacing-horizontal);
+	visibility: visible;
+	opacity: 1;
+	top: 50px;
+	right: 0;
+	bottom: 30px;
+	left: 0;
+}
+
 /*# 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;
 	}
 }
 
@@ -243,9 +244,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 @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;
+		/*background: var(--primary-nav--color-background);
+				padding: var(--global--spacing-unit);
+				top: $site-branding-height;*/
 	}
 	.admin-bar .site-header .primary-navigation .primary-menu-container {
 		top: 114px;

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;
 	}
 }
 
@@ -243,9 +244,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 @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;
+		/*background: var(--primary-nav--color-background);
+				padding: var(--global--spacing-unit);
+				top: $site-branding-height;*/
 	}
 	.admin-bar .site-header .primary-navigation .primary-menu-container {
 		top: 114px;