Adjust site branding padding and menu button positioning.

spearhead/assets/sass/_header.scss

@@ -1,5 +1,5 @@
 $admin-bar-height: 46px;
-$site-branding-height: 59px;
+$site-branding-height: 72px;
 
 .has-main-navigation {
 	.site-header {
@@ -57,9 +57,9 @@ $site-branding-height: 59px;
 		}
 
 		button#primary-close-menu {
-			color: var(--global--color-background);
+			color: var(--global--color-secondary);
 			position: fixed;
-			top: $admin-bar-height + $site-branding-height;
+			top: 4px;
 			right: 0;
 
 			&:hover {
@@ -120,8 +120,10 @@ $site-branding-height: 59px;
 
 	button#primary-open-menu {
 		margin: 0;
-		padding: 6px;
-		position: static;
+		padding: 0;
+		top: var(--global--spacing-vertical);
+		right: var(--global--spacing-horizontal);
+		position: absolute;
 
 		&:before {
 			margin: 0;

spearhead/style-rtl.css

@@ -121,10 +121,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: 59px;
+		top: 72px;
 	}
 	.admin-bar .site-header .primary-navigation .primary-menu-container {
-		top: 105px;
+		top: 118px;
 	}
 	.site-header .primary-navigation .primary-menu-container a {
 		color: var(--global--color-background);
@@ -132,9 +132,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header .primary-navigation button#primary-close-menu {
-	color: var(--global--color-background);
+	color: var(--global--color-secondary);
 	position: fixed;
-	top: 105px;
+	top: 4px;
 	left: 0;
 }
 
@@ -191,8 +191,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header div.menu-button-container button#primary-open-menu {
 	margin: 0;
-	padding: 6px;
-	position: static;
+	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 {

spearhead/style.css

@@ -121,10 +121,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: 59px;
+		top: 72px;
 	}
 	.admin-bar .site-header .primary-navigation .primary-menu-container {
-		top: 105px;
+		top: 118px;
 	}
 	.site-header .primary-navigation .primary-menu-container a {
 		color: var(--global--color-background);
@@ -132,9 +132,9 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .site-header .primary-navigation button#primary-close-menu {
-	color: var(--global--color-background);
+	color: var(--global--color-secondary);
 	position: fixed;
-	top: 105px;
+	top: 4px;
 	right: 0;
 }
 
@@ -191,8 +191,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header div.menu-button-container button#primary-open-menu {
 	margin: 0;
-	padding: 6px;
-	position: static;
+	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 {