fix menu styles

seedlet/assets/js/primary-navigation.js

@@ -36,7 +36,7 @@
 		document.addEventListener( 'keydown', function( event ) {
 			if ( ! wrapper.classList.contains( `${ id }-navigation-open` ) ){
 				return;
-			} 
+			}
 			var modal, elements, selectors, lastEl, firstEl, activeEl, tabKey, shiftKey, escKey;
 
 			modal = document.querySelector( `.${ id }-navigation` );
@@ -80,4 +80,4 @@
 		new navMenu( 'primary' );
 		new navMenu( 'woo' );
 	});
-} )();
+} )();

spearhead/assets/sass/_header.scss

@@ -28,7 +28,6 @@
 
 	.primary-navigation {
 		flex-grow: 4;
-		justify-content: flex-end;
 		margin-top: 0;
 	}
 
@@ -36,12 +35,36 @@
 		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);
+		margin: 6px;
+		padding: var(--social-nav--padding);
+
+		a:hover {
+			border-color: transparent;
+			color: var(--global--color-primary);
+		}
 	}
 
 	> .site-branding, > nav {
 		margin: 0;
 	}
+
+	.social-navigation {
+		ul {
+			justify-content: flex-end;
+			flex-wrap: nowrap;
+		}
+
+		li:first-of-type > a,
+		a {
+			padding: 0 0 0 var(--social-nav--padding);
+
+			&:hover {
+				border-color: transparent;
+				color: var(--global--color-primary);
+			}
+		}
+	}
 }

spearhead/style-rtl.css

@@ -102,7 +102,6 @@ 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;
 }
 
@@ -112,13 +111,35 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .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;
 }
 
+.site-header .social-navigation ul {
+	justify-content: flex-end;
+	flex-wrap: nowrap;
+}
+
+.site-header .social-navigation li:first-of-type > a,
+.site-header .social-navigation a {
+	padding: 0 var(--social-nav--padding) 0 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);
+}
+
 .wp-block-latest-posts > li > a {
 	color: var(--global--color-foreground);
 }

spearhead/style.css

@@ -102,7 +102,6 @@ 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;
 }
 
@@ -112,13 +111,35 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .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;
 }
 
+.site-header .social-navigation ul {
+	justify-content: flex-end;
+	flex-wrap: nowrap;
+}
+
+.site-header .social-navigation li:first-of-type > a,
+.site-header .social-navigation a {
+	padding: 0 0 0 var(--social-nav--padding);
+}
+
+.site-header .social-navigation li:first-of-type > a:hover,
+.site-header .social-navigation a:hover {
+	border-color: transparent;
+	color: var(--global--color-primary);
+}
+
 .wp-block-latest-posts > li > a {
 	color: var(--global--color-foreground);
 }

spearhead/variables.css

@@ -57,13 +57,13 @@
 	--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--padding: 0px;
 	--primary-nav--font-family-mobile: var(--global--font-family-secondary);
 	--primary-nav--font-size-mobile: var(--global--font-size-sm);
 
-	--social-nav--padding: calc( .67 * var(--global--spacing-unit) );
+	--social-nav--padding: var(--global--spacing-unit);
 
 	--pullquote--font-style: normal;
 	--pullquote--letter-spacing: 0;