get the submenu size right

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

@@ -10,6 +10,12 @@
 	width: 100%;
 }
 
+@media only screen and (max-width: 481px) {
+	.menu-button-container {
+		display: block;
+	}
+}
+
 .menu-button-container #primary-open-menu {
 	margin-right: auto;
 	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
@@ -17,12 +23,6 @@
 	margin-left: calc(0.25 * var(--global--spacing-unit));
 }
 
-@media only screen and (max-width: 481px) {
-	.menu-button-container {
-		display: flex;
-	}
-}
-
 .admin-bar:not(.primary-navigation-open) .menu-button-container {
 	top: 46px;
 }

seedlet/assets/css/style-navigation.css

@@ -10,6 +10,12 @@
 	width: 100%;
 }
 
+@media only screen and (max-width: 481px) {
+	.menu-button-container {
+		display: block;
+	}
+}
+
 .menu-button-container #primary-open-menu {
 	margin-left: auto;
 	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
@@ -17,12 +23,6 @@
 	margin-right: calc(0.25 * var(--global--spacing-unit));
 }
 
-@media only screen and (max-width: 481px) {
-	.menu-button-container {
-		display: flex;
-	}
-}
-
 .admin-bar:not(.primary-navigation-open) .menu-button-container {
 	top: 46px;
 }

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

@@ -8,6 +8,11 @@
 	position: absolute;
 	top: 0;
 	width: 100%;
+
+	@include media( $navigation-max-break-point ){
+		display: block;
+	}
+
 	#primary-open-menu {
 		margin-left: auto;
 		padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
@@ -15,10 +20,6 @@
 		margin-right: calc(0.25 * var(--global--spacing-unit));
 	}
 
-	@include media( $navigation-max-break-point ){
-		display: flex;
-	}
-
 	.admin-bar:not(.primary-navigation-open) & {
 		top: 46px;
 	}

seedlet/header.php

@@ -24,28 +24,10 @@
 	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'seedlet' ); ?></a>
 
 		<header id="masthead" class="site-header default-max-width" role="banner">
-			<div class="menu-button-container">
-				<?php if ( class_exists( 'WooCommerce' ) ) : ?>
-					<button id="woo-open-menu" class="button open">
-						<span class="dropdown-icon open"><?php echo seedlet_get_icon_svg( 'shopping_cart' ); ?> <?php _e( 'Cart', 'seedlet' ); ?></span>
-						<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'seedlet' ) ?></span>
-					</button>
-				<?php endif; ?>
-				<?php if ( has_nav_menu( 'primary' ) ) : ?>
-					<button id="primary-open-menu" class="button open">
-						<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ) ?></span>
-						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
-					</button>
-				<?php endif; ?>
-			</div>
 			<?php get_template_part( 'template-parts/header/site-branding' ); ?>
 
 			<?php if ( has_nav_menu( 'primary' ) ) : ?>
 				<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Main', 'seedlet' ); ?>">
-					<button id="primary-close-menu" class="button close">
-						<span class="dropdown-icon close"><?php _e( 'Close', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'close' ) ?></span>
-						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'seedlet' ); ?></span>
-					</button>
 					<?php
 					// Get menu slug
 					$location_name = 'primary';
@@ -109,6 +91,25 @@
 				</nav><!-- .social-navigation -->
 			<?php endif; ?>
 
+			<div class="menu-button-container">
+				<?php if ( class_exists( 'WooCommerce' ) ) : ?>
+					<button id="woo-open-menu" class="button open">
+						<span class="dropdown-icon open"><?php echo seedlet_get_icon_svg( 'shopping_cart' ); ?> <?php _e( 'Cart', 'seedlet' ); ?></span>
+						<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'seedlet' ) ?></span>
+					</button>
+				<?php endif; ?>
+				<?php if ( has_nav_menu( 'primary' ) ) : ?>
+					<button id="primary-open-menu" class="button open">
+						<span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ) ?></span>
+						<span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
+					</button>
+					<button id="primary-close-menu" class="button close">
+						<span class="dropdown-icon close"><?php _e( 'Close', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'close' ) ?></span>
+						<span class="hide-visually collapsed-text"><?php _e( 'collapsed', 'seedlet' ); ?></span>
+					</button>
+				<?php endif; ?>
+			</div>
+
 		</header><!-- #masthead -->
 
 	<div id="content" class="site-content">

spearhead/assets/sass/_header.scss

@@ -80,3 +80,20 @@
 		}
 	}
 }
+
+
+.site-header div.menu-button-container {
+	margin: 0 0 0 var(--social-nav--padding);
+	position: static;
+	width: auto;
+
+	button#primary-close-menu,
+	button#primary-open-menu {
+		margin: 0;
+		padding: 6px;
+
+		&:before {
+			margin: 0;
+		}
+	}
+}

spearhead/navigation-rtl.css

@@ -13,6 +13,12 @@
 	width: 100%;
 }
 
+@media only screen and (max-width: 829px) {
+	.menu-button-container {
+		display: block;
+	}
+}
+
 .menu-button-container #primary-open-menu {
 	margin-right: auto;
 	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
@@ -20,12 +26,6 @@
 	margin-left: calc(0.25 * var(--global--spacing-unit));
 }
 
-@media only screen and (max-width: 829px) {
-	.menu-button-container {
-		display: flex;
-	}
-}
-
 .admin-bar:not(.primary-navigation-open) .menu-button-container {
 	top: 46px;
 }

spearhead/navigation.css

@@ -13,6 +13,12 @@
 	width: 100%;
 }
 
+@media only screen and (max-width: 829px) {
+	.menu-button-container {
+		display: block;
+	}
+}
+
 .menu-button-container #primary-open-menu {
 	margin-left: auto;
 	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
@@ -20,12 +26,6 @@
 	margin-right: calc(0.25 * var(--global--spacing-unit));
 }
 
-@media only screen and (max-width: 829px) {
-	.menu-button-container {
-		display: flex;
-	}
-}
-
 .admin-bar:not(.primary-navigation-open) .menu-button-container {
 	top: 46px;
 }

spearhead/style-rtl.css

@@ -154,6 +154,23 @@ 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;
+	position: static;
+	width: auto;
+}
+
+.site-header div.menu-button-container button#primary-close-menu,
+.site-header div.menu-button-container button#primary-open-menu {
+	margin: 0;
+	padding: 6px;
+}
+
+.site-header div.menu-button-container button#primary-close-menu:before,
+.site-header div.menu-button-container button#primary-open-menu:before {
+	margin: 0;
+}
+
 .wp-block-latest-posts > li > a {
 	color: var(--global--color-foreground);
 }

spearhead/style.css

@@ -154,6 +154,23 @@ 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);
+	position: static;
+	width: auto;
+}
+
+.site-header div.menu-button-container button#primary-close-menu,
+.site-header div.menu-button-container button#primary-open-menu {
+	margin: 0;
+	padding: 6px;
+}
+
+.site-header div.menu-button-container button#primary-close-menu:before,
+.site-header div.menu-button-container button#primary-open-menu:before {
+	margin: 0;
+}
+
 .wp-block-latest-posts > li > a {
 	color: var(--global--color-foreground);
 }

spearhead/variables.css

@@ -62,6 +62,7 @@
 	--primary-nav--padding: 0px;
 	--primary-nav--font-family-mobile: var(--global--font-family-secondary);
 	--primary-nav--font-size-mobile: var(--global--font-size-sm);
+	--primary-nav--font-size-sub-menu-mobile: var( --primary-nav--font-size-mobile );
 
 	--social-nav--padding: var(--global--spacing-unit);