restructuring

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

@@ -1,7 +1,3 @@
-// Abstracts
-// - Mixins, variables and functions
-@import "../../abstracts/mixins";
-
 // Navigation
 
 // Mobile menu toggles
@@ -19,7 +15,7 @@
 		margin-right: calc(0.25 * var(--global--spacing-unit));
 	}
 
-	@include media(mobile-only){
+	@include media( $navigation-max-break-point ){
 		display: flex;
 	}
 
@@ -118,7 +114,7 @@
 	margin-top: 0;
 	margin-bottom: 0;
 
-	@include media(mobile-only) {
+	@include media( $navigation-max-break-point ) {
 		width: 100%;
 	}
 
@@ -138,7 +134,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;
 		}
 	}
@@ -169,7 +165,7 @@
 		top: 46px;
 	}
 
-	@include media(mobile) {
+	@include media( $navigation-min-break-point ) {
 		position: relative;
 		display: flex;
 		justify-content: var(--primary-nav--justify-content);
@@ -233,7 +229,7 @@
 				z-index: 99999;
 			}
 
-			@include media(mobile) {
+			@include media( $navigation-min-break-point ) {
 				display: inherit;
 				width: inherit;
 
@@ -254,7 +250,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 +278,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 +311,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 +334,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 +350,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 +360,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 +375,7 @@
  			display: none;
  		}
 
-		@include media(mobile) {
+		@include media( $navigation-min-break-point ) {
 
 			> .svg-icon {
 				display: inline-block;
@@ -400,7 +396,7 @@
 }
 
 // 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;
 		max-width: 100%;

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";

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/_responsive.scss

@@ -1,82 +1,6 @@
 /**
  * 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;

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

@@ -13,6 +13,8 @@ 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";

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,466 @@
+/**
+ * Required Variables
+ */
+/**
+ * Required Variables
+ */
+.menu-button-container {
+	display: none;
+	justify-content: space-between;
+	right: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+
+.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));
+}
+
+@media only screen and (max-width: 829px) {
+	.menu-button-container {
+		display: flex;
+	}
+}
+
+.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;
+	z-index: 501;
+}
+
+.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);
+}
+
+.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
+.woo-navigation,
+.admin-bar
+.woo-navigation > div,
+.admin-bar.lock-scrolling
+.woo-navigation > .button {
+	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 {
+		position: fixed;
+		max-width: 100%;
+	}
+}

spearhead/navigation.css

@@ -0,0 +1,468 @@
+/**
+ * Required Variables
+ */
+/**
+ * Required Variables
+ */
+.menu-button-container {
+	display: none;
+	justify-content: space-between;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+
+.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));
+}
+
+@media only screen and (max-width: 829px) {
+	.menu-button-container {
+		display: flex;
+	}
+}
+
+.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;
+	z-index: 501;
+}
+
+.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);
+}
+
+.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
+.woo-navigation,
+.admin-bar
+.woo-navigation > div,
+.admin-bar.lock-scrolling
+.woo-navigation > .button {
+	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 {
+		position: fixed;
+		max-width: 100%;
+	}
+}
+
+/*# sourceMappingURL=navigation.css.map */

spearhead/package.json

@@ -10,8 +10,6 @@
   "author": "automattic",
   "license": "GPL-2.0",
   "devDependencies": {
-    "@wordpress/base-styles": "^2.0.1",
-    "@wordpress/browserslist-config": "^2.2.2",
     "chokidar-cli": "^2.1.0",
     "minimist": "^1.2.2",
     "node-sass": "^4.13.1",
@@ -21,8 +19,10 @@
   },
   "scripts": {
     "start": "npm run watch",
-    "build:style": "node-sass assets/sass/style.scss --importer node_modules/node-sass-package-importer/dist/cli.js style.css --output-style expanded --indent-type tab --indent-width 1  --source-map true",
+    "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

@@ -13,11 +13,14 @@ 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;

spearhead/style.css

@@ -13,11 +13,14 @@ 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;