menu fixes

seedlet/assets/css/style-navigation-rtl.css

@@ -457,7 +457,9 @@
 
 @media only screen and (max-width: 481px) {
 	.lock-scrolling .site {
-		position: fixed;
+		right: 0;
 		max-width: 100%;
+		position: fixed;
+		left: 0;
 	}
 }

seedlet/assets/css/style-navigation.css

@@ -457,8 +457,10 @@
 
 @media only screen and (max-width: 481px) {
 	.lock-scrolling .site {
-		position: fixed;
+		left: 0;
 		max-width: 100%;
+		position: fixed;
+		right: 0;
 	}
 }
 

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

@@ -398,7 +398,9 @@
 // Keep the menu pinned to the top when the menu is open.
 @include media( $navigation-max-break-point ) {
 	.lock-scrolling .site {
-		position: fixed;
+		left: 0;
 		max-width: 100%;
+		position: fixed;
+		right: 0;
 	}
 }

spearhead/assets/sass/_header.scss

@@ -29,6 +29,18 @@
 	.primary-navigation {
 		flex-grow: 4;
 		margin-top: 0;
+
+		@include media( laptop-only ){ // TODO - use $navigation-max-break-point variable
+			.primary-menu-container {
+				padding: var(--global--spacing-unit);
+				background: var(--global--color-foreground);
+				top: 119px;
+
+				a {
+					color: var(--global--color-background);
+				}
+			}
+		}
 	}
 
 	.primary-navigation .menu-item-has-children > .svg-icon {

spearhead/navigation-rtl.css

@@ -460,7 +460,9 @@
 
 @media only screen and (max-width: 829px) {
 	.lock-scrolling .site {
-		position: fixed;
+		right: 0;
 		max-width: 100%;
+		position: fixed;
+		left: 0;
 	}
 }

spearhead/navigation.css

@@ -460,8 +460,10 @@
 
 @media only screen and (max-width: 829px) {
 	.lock-scrolling .site {
-		position: fixed;
+		left: 0;
 		max-width: 100%;
+		position: fixed;
+		right: 0;
 	}
 }
 

spearhead/style-rtl.css

@@ -108,6 +108,17 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin-top: 0;
 }
 
+@media only screen and (max-width: 829px) {
+	.site-header .primary-navigation .primary-menu-container {
+		padding: var(--global--spacing-unit);
+		background: var(--global--color-foreground);
+		top: 119px;
+	}
+	.site-header .primary-navigation .primary-menu-container a {
+		color: var(--global--color-background);
+	}
+}
+
 .site-header .primary-navigation .menu-item-has-children > .svg-icon {
 	margin-top: -2px;
 }

spearhead/style.css

@@ -108,6 +108,17 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin-top: 0;
 }
 
+@media only screen and (max-width: 829px) {
+	.site-header .primary-navigation .primary-menu-container {
+		padding: var(--global--spacing-unit);
+		background: var(--global--color-foreground);
+		top: 119px;
+	}
+	.site-header .primary-navigation .primary-menu-container a {
+		color: var(--global--color-background);
+	}
+}
+
 .site-header .primary-navigation .menu-item-has-children > .svg-icon {
 	margin-top: -2px;
 }