Videomaker: Update Videomaker navigation (#5059)

* Videomaker: Update navigation width * Update font sizes * change the jusificiation to be center * add social links to the navigation * prevent the navigation wrapping
Automattic · Nov 24, 2021 · dbd73c2 · dbd73c2
1 parent c1f51c9
commit dbd73c2
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/blockbase/sass/blocks/_navigation.scss b/blockbase/sass/blocks/_navigation.scss
@@ -35,6 +35,7 @@
 		.wp-block-navigation-item {
 			align-items: flex-start;
 		}
+
 		.wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
 			.wp-block-navigation__submenu-container {
 				font-size: var(--wp--preset--font-size--normal);

diff --git a/videomaker/assets/theme.css b/videomaker/assets/theme.css
diff --git a/videomaker/block-template-parts/header.html b/videomaker/block-template-parts/header.html
@@ -7,6 +7,6 @@
 		<!-- wp:site-tagline /-->
 	</div>
 	<!-- /wp:group -->
-	<!-- wp:navigation {"overlayMenu":"always","__unstableLocation":"primary","className":"is-style-blockbase-navigation-improved-responsive","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
+	<!-- wp:navigation {"overlayMenu":"always","__unstableLocation":"primary","__unstableSocialLinks":"social","className":"is-style-blockbase-navigation-improved-responsive","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right","orientation":"horizontal"}} /-->
 </header>
 <!-- /wp:group -->
diff --git a/videomaker/sass/_navigation.scss b/videomaker/sass/_navigation.scss
@@ -5,12 +5,17 @@
 
 .wp-block-navigation.is-style-blockbase-navigation-improved-responsive {
 	&.is-responsive .is-menu-open.wp-block-navigation__responsive-container {
+		font-size: var(--wp--preset--font-size--large);
+		font-weight: 200;
+
 		.wp-block-navigation__container {
 			row-gap: 1rem;
 		}
 
 		.wp-block-navigation__responsive-container-content { // Needed for specificity to beat the navigation block CSS
 			align-items: flex-start;
+			margin: 0 auto;
+			max-width: 800px; // This should match the content width
 
 			.wp-block-navigation-item {
 				row-gap: 0rem;
@@ -25,10 +30,17 @@
 			}
 		}
 		.wp-block-navigation__responsive-container-content {
-			justify-content: space-between;
+			flex-wrap: nowrap;
+			justify-content: center;
 		}
 		ul.wp-block-social-links {
 			padding-bottom: calc( var(--wp--custom--gap--vertical) * 2 );
 		}
+
+		.wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
+			.wp-block-navigation__submenu-container {
+				font-size: var(--wp--preset--font-size--medium);
+			}
+		}
 	}
 }