Merge pull request #2603 from Automattic/fix/spearhead-menu-wrapping

Spearhead: fix menu wrapping bug (#2589)

spearhead/assets/sass/_header.scss

@@ -26,12 +26,11 @@ $site-branding-height: 68px;
 
 .site-header {
 	display: flex;
-	flex-wrap: wrap;
 	justify-content: space-between;
 	max-width: var(--responsive--alignfull-width);
 
-	@include media( mobile-only ){
-		align-items: center;
+	@include media( laptop-only ){
+		flex-wrap: wrap;
 	}
 
 	.site-branding {
@@ -70,6 +69,8 @@ $site-branding-height: 68px;
 
 		button#primary-close-menu {
 			color: var(--global--color-secondary);
+			margin: 0;
+			padding: var(--global--spacing-horizontal);
 			position: fixed;
 			top: 0;
 			right: 0;
@@ -145,6 +146,10 @@ $site-branding-height: 68px;
 
 .site-header div.menu-button-container {
 	button#primary-open-menu {
+		margin-top: 0;
+		margin-right: 0;
+		padding: var(--global--spacing-horizontal);
+
 		&:before {
 			margin: 0;
 		}

spearhead/style-rtl.css

@@ -155,14 +155,13 @@ 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);
 }
 
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 829px) {
 	.site-header {
-		align-items: center;
+		flex-wrap: wrap;
 	}
 }
 
@@ -201,6 +200,8 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .primary-navigation button#primary-close-menu {
 	color: var(--global--color-secondary);
+	margin: 0;
+	padding: var(--global--spacing-horizontal);
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -272,6 +273,12 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	color: var(--global--color-primary);
 }
 
+.site-header div.menu-button-container button#primary-open-menu {
+	margin-top: 0;
+	margin-left: 0;
+	padding: var(--global--spacing-horizontal);
+}
+
 .site-header div.menu-button-container button#primary-open-menu:before {
 	margin: 0;
 }

spearhead/style.css

@@ -155,14 +155,13 @@ 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);
 }
 
-@media only screen and (max-width: 481px) {
+@media only screen and (max-width: 829px) {
 	.site-header {
-		align-items: center;
+		flex-wrap: wrap;
 	}
 }
 
@@ -201,6 +200,8 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .primary-navigation button#primary-close-menu {
 	color: var(--global--color-secondary);
+	margin: 0;
+	padding: var(--global--spacing-horizontal);
 	position: fixed;
 	top: 0;
 	right: 0;
@@ -272,6 +273,12 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	color: var(--global--color-primary);
 }
 
+.site-header div.menu-button-container button#primary-open-menu {
+	margin-top: 0;
+	margin-right: 0;
+	padding: var(--global--spacing-horizontal);
+}
+
 .site-header div.menu-button-container button#primary-open-menu:before {
 	margin: 0;
 }