Move social navigation and adjust button positioning.

spearhead/assets/sass/_header.scss

@@ -1,5 +1,5 @@
 $admin-bar-height: 46px;
-$site-branding-height: 72px;
+$site-branding-height: 68px;
 
 .has-main-navigation {
 	.site-header {
@@ -19,6 +19,7 @@ $site-branding-height: 72px;
 
 .site-header {
 	display: flex;
+	flex-wrap: wrap;
 	justify-content: space-between;
 	max-width: var(--responsive--alignfull-width);
 
@@ -59,9 +60,13 @@ $site-branding-height: 72px;
 		button#primary-close-menu {
 			color: var(--global--color-secondary);
 			position: fixed;
-			top: 4px;
+			top: 0;
 			right: 0;
 
+			.admin-bar & {
+				top: $admin-bar-height;
+			}
+
 			&:hover {
 				color: var(--global--color-primary);
 			}
@@ -89,13 +94,28 @@ $site-branding-height: 72px;
 	}
 
 	.social-navigation {
+		flex-basis: 100%;
+
 		ul {
-			justify-content: flex-end;
+			justify-content: flex-start;
 			flex-wrap: nowrap;
+			margin-top: var(--global--spacing-vertical);
 
 			li {
 				margin: 0;
-				padding: 0 0 0 var(--social-nav--padding);
+				padding: 0 var(--social-nav--padding) 0 0;
+			}
+
+		}
+		@include media( laptop ){
+			flex-basis: auto;
+			ul {
+				justify-content: flex-end;
+				margin-top: 0;
+
+				li {
+					padding: 0 0 0 var(--social-nav--padding);
+				}
 			}
 		}
 
@@ -113,18 +133,7 @@ $site-branding-height: 72px;
 
 
 .site-header div.menu-button-container {
-	margin: 0 0 0 var(--social-nav--padding);
-	order: 99;
-	position: static;
-	width: auto;
-
 	button#primary-open-menu {
-		margin: 0;
-		padding: 0;
-		top: var(--global--spacing-vertical);
-		right: var(--global--spacing-horizontal);
-		position: absolute;
-
 		&:before {
 			margin: 0;
 		}

spearhead/style-rtl.css

@@ -92,6 +92,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header {
 	display: flex;
+	flex-wrap: wrap;
 	justify-content: space-between;
 	max-width: var(--responsive--alignfull-width);
 }
@@ -121,10 +122,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	.site-header .primary-navigation .primary-menu-container {
 		background: var(--primary-nav--color-background);
 		padding: var(--global--spacing-unit);
-		top: 72px;
+		top: 68px;
 	}
 	.admin-bar .site-header .primary-navigation .primary-menu-container {
-		top: 118px;
+		top: 114px;
 	}
 	.site-header .primary-navigation .primary-menu-container a {
 		color: var(--global--color-background);
@@ -134,10 +135,14 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 .site-header .primary-navigation button#primary-close-menu {
 	color: var(--global--color-secondary);
 	position: fixed;
-	top: 4px;
+	top: 0;
 	left: 0;
 }
 
+.admin-bar .site-header .primary-navigation button#primary-close-menu {
+	top: 46px;
+}
+
 .site-header .primary-navigation button#primary-close-menu:hover {
 	color: var(--global--color-primary);
 }
@@ -161,14 +166,32 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.site-header .social-navigation {
+	flex-basis: 100%;
+}
+
 .site-header .social-navigation ul {
-	justify-content: flex-end;
+	justify-content: flex-start;
 	flex-wrap: nowrap;
+	margin-top: var(--global--spacing-vertical);
 }
 
 .site-header .social-navigation ul li {
 	margin: 0;
-	padding: 0 var(--social-nav--padding) 0 0;
+	padding: 0 0 0 var(--social-nav--padding);
+}
+
+@media only screen and (min-width: 830px) {
+	.site-header .social-navigation {
+		flex-basis: auto;
+	}
+	.site-header .social-navigation ul {
+		justify-content: flex-end;
+		margin-top: 0;
+	}
+	.site-header .social-navigation ul li {
+		padding: 0 var(--social-nav--padding) 0 0;
+	}
 }
 
 .site-header .social-navigation li:first-of-type > a,
@@ -182,21 +205,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	color: var(--global--color-primary);
 }
 
-.site-header div.menu-button-container {
-	margin: 0 var(--social-nav--padding) 0 0;
-	order: 99;
-	position: static;
-	width: auto;
-}
-
-.site-header div.menu-button-container button#primary-open-menu {
-	margin: 0;
-	padding: 0;
-	top: var(--global--spacing-vertical);
-	left: var(--global--spacing-horizontal);
-	position: absolute;
-}
-
 .site-header div.menu-button-container button#primary-open-menu:before {
 	margin: 0;
 }

spearhead/style.css

@@ -92,6 +92,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header {
 	display: flex;
+	flex-wrap: wrap;
 	justify-content: space-between;
 	max-width: var(--responsive--alignfull-width);
 }
@@ -121,10 +122,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	.site-header .primary-navigation .primary-menu-container {
 		background: var(--primary-nav--color-background);
 		padding: var(--global--spacing-unit);
-		top: 72px;
+		top: 68px;
 	}
 	.admin-bar .site-header .primary-navigation .primary-menu-container {
-		top: 118px;
+		top: 114px;
 	}
 	.site-header .primary-navigation .primary-menu-container a {
 		color: var(--global--color-background);
@@ -134,10 +135,14 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 .site-header .primary-navigation button#primary-close-menu {
 	color: var(--global--color-secondary);
 	position: fixed;
-	top: 4px;
+	top: 0;
 	right: 0;
 }
 
+.admin-bar .site-header .primary-navigation button#primary-close-menu {
+	top: 46px;
+}
+
 .site-header .primary-navigation button#primary-close-menu:hover {
 	color: var(--global--color-primary);
 }
@@ -161,14 +166,32 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.site-header .social-navigation {
+	flex-basis: 100%;
+}
+
 .site-header .social-navigation ul {
-	justify-content: flex-end;
+	justify-content: flex-start;
 	flex-wrap: nowrap;
+	margin-top: var(--global--spacing-vertical);
 }
 
 .site-header .social-navigation ul li {
 	margin: 0;
-	padding: 0 0 0 var(--social-nav--padding);
+	padding: 0 var(--social-nav--padding) 0 0;
+}
+
+@media only screen and (min-width: 830px) {
+	.site-header .social-navigation {
+		flex-basis: auto;
+	}
+	.site-header .social-navigation ul {
+		justify-content: flex-end;
+		margin-top: 0;
+	}
+	.site-header .social-navigation ul li {
+		padding: 0 0 0 var(--social-nav--padding);
+	}
 }
 
 .site-header .social-navigation li:first-of-type > a,
@@ -182,21 +205,6 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	color: var(--global--color-primary);
 }
 
-.site-header div.menu-button-container {
-	margin: 0 0 0 var(--social-nav--padding);
-	order: 99;
-	position: static;
-	width: auto;
-}
-
-.site-header div.menu-button-container button#primary-open-menu {
-	margin: 0;
-	padding: 0;
-	top: var(--global--spacing-vertical);
-	right: var(--global--spacing-horizontal);
-	position: absolute;
-}
-
 .site-header div.menu-button-container button#primary-open-menu:before {
 	margin: 0;
 }