Adjusted menu CSS to match recent changes in the block (#4822)

* Adjusted menu CSS to match recent changes in the block

* Adjusted mobile menu styling to fit recent changes to navigation block

* Style social nav on mobile only

* Made the same menu changes in Geologist as in Quadrat

* Corrected blockbase classes due to recent changes to navigation block

* Adjusted skatepark's navigation classes

* corrected videomaker classes

* Improved mobile navigation alignment for Seedlet Blocks

* Further addressed Seedlet's mobile stylings.  Better addressed Blockbase mobile submenu spacing.

* Remove the margins on the social links block when in the nav

* Add a block style for 'clean mobile navigation block' and cleaned up base navigation block styles polyfill

* moved social menu location of styled mobile menu

* Renamed block style to improved responsive navigation

Co-authored-by: Ben Dwyer <ben@scruffian.com>

blockbase/assets/ponyfill.css

@@ -460,17 +460,46 @@ ol {
 	padding-left: var(--wp--custom--list--spacing--padding--left);
 }
 
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
+.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
+	background-color: var(--wp--custom--color--background);
+	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
+}
+
+.wp-block-navigation.is-responsive:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
 	background-color: var(--wp--custom--color--background);
 	color: var(--wp--custom--color--foreground);
 }
 
-.wp-block-navigation.is-responsive .wp-block-navigation-link__content {
-	color: var(--wp--custom--color--foreground) !important;
+.wp-block-navigation.is-responsive ul.wp-block-social-links {
+	margin: 0;
+	gap: var(--wp--custom--gap--baseline);
+}
+
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open {
+	font-size: var(--wp--preset--font-size--medium) !important;
+}
+
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open .wp-block-navigation__container {
+	row-gap: 0.5rem !important;
+	align-items: flex-start !important;
+	flex: unset;
+	padding-bottom: 0;
+}
+
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open .wp-block-navigation-item {
+	align-items: flex-start !important;
+}
+
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open .wp-block-navigation__submenu-container {
+	font-size: var(--wp--preset--font-size--normal) !important;
+	padding-bottom: 0;
+	padding-left: var(--wp--custom--gap--horizontal) !important;
+	padding-top: 0.5rem;
+	row-gap: 0.5rem !important;
 }
 
-.wp-block-navigation.is-responsive .has-child .wp-block-navigation-link__container {
-	display: revert;
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive.is-responsive .is-menu-open ul.wp-block-social-links {
+	justify-content: flex-start;
 }
 
 p.has-drop-cap:not(:focus):first-letter {

blockbase/functions.php

@@ -159,3 +159,8 @@ add_action(
 		);
 	}
 );
+
+/**
+ * Block Styles.
+ */
+require get_template_directory() . '/inc/block-styles.php';

blockbase/inc/block-styles.php

@@ -0,0 +1,31 @@
+<?php
+/**
+ * Blockbase Theme: Block Styles
+ *
+ * @package Blockbase 
+ * @since 1.2.8
+ */
+
+if ( ! function_exists( 'blockbase_register_block_styles' ) ) :
+
+	function blockbase_register_block_styles() {
+
+		if ( function_exists( 'register_block_style' ) ) {
+
+			/**
+			 * Register block styles
+			 */
+			register_block_style(
+				'core/navigation',
+				array(
+					'name'         => 'blockbase-navigation-improved-responsive',
+					'label'        => __( 'Improved Responsive Navigation', 'blockbase' ),
+					'style_handle' => 'blockbase-navigation-improved-responsive',
+				)
+			);
+
+		}
+	}
+endif;
+
+add_action( 'after_setup_theme', 'blockbase_register_block_styles' );

blockbase/sass/blocks/_navigation.scss

@@ -1,13 +1,43 @@
 // See https://github.com/WordPress/gutenberg/issues/34648
-.wp-block-navigation.is-responsive {
-	.wp-block-navigation__responsive-container.is-menu-open {
+.wp-block-navigation {
+	// See https://github.com/WordPress/gutenberg/issues/34648
+	.has-child .wp-block-navigation__submenu-container {
 		background-color: var(--wp--custom--color--background);
-		color: var(--wp--custom--color--foreground);
+		border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
 	}
-	.wp-block-navigation-link__content {
-		color: var(--wp--custom--color--foreground) !important;
+	&.is-responsive {
+		&:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
+			background-color: var(--wp--custom--color--background);
+			color: var(--wp--custom--color--foreground);
+		}
+		ul.wp-block-social-links {
+			margin: 0;
+			gap: var(--wp--custom--gap--baseline);
+		}
 	}
-	.has-child .wp-block-navigation-link__container{
-		display: revert;
+}
+
+.wp-block-navigation.is-style-blockbase-navigation-improved-responsive {
+	&.is-responsive .is-menu-open {
+		font-size: var(--wp--preset--font-size--medium) !important;
+		.wp-block-navigation__container {
+			row-gap: 0.5rem !important;
+			align-items: flex-start !important;
+			flex: unset;
+			padding-bottom: 0;
+		}
+		.wp-block-navigation-item {
+			align-items: flex-start !important;
+		}
+		.wp-block-navigation__submenu-container {
+			font-size: var(--wp--preset--font-size--normal) !important;
+			padding-bottom: 0;
+			padding-left: var(--wp--custom--gap--horizontal) !important;
+			padding-top: 0.5rem;
+			row-gap: 0.5rem !important;
+		}
+		ul.wp-block-social-links {
+			justify-content: flex-start;
+		}
 	}
 }

geologist/assets/theme.css

@@ -118,8 +118,7 @@ ul ul {
 	text-decoration: underline;
 }
 
-.wp-block-navigation:not(.has-background) .wp-block-navigation__container .submenu-container,
-.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
+.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
 	background-color: var(--wp--custom--color--background);
 	border-color: var(--wp--custom--color--tertiary);
 }
@@ -147,31 +146,31 @@ ul ul {
 	margin-right: 0;
 }
 
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container {
-	margin-right: -19px;
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container {
+	gap: 0;
 	padding: 0 19px 0 0;
 	border-right: 1px solid var(--wp--custom--color--foreground);
 }
 
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container .wp-block-pages-list__item__link,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container .wp-block-navigation-link__content,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container .wp-block-pages-list__item__link,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container .wp-block-navigation-link__content,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container .wp-block-pages-list__item__link,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container .wp-block-navigation-link__content,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container .wp-block-pages-list__item__link,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container .wp-block-navigation-link__content {
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
 	padding: 0;
 	font-size: var(--wp--custom--font-sizes--tiny);
 	line-height: 40px;
 }
 
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
-	padding-top: 50px;
 	align-items: flex-end;
+	gap: 0;
+}
+
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open .wp-block-social-links {
+	position: absolute;
+	flex-direction: column;
+	padding-top: 36px;
 }
 
 .wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),

geologist/sass/blocks/_navigation.scss

@@ -10,12 +10,9 @@
 		}
 	}
 	&:not(.has-background) {
-		.wp-block-navigation__container {
-			.submenu-container,
-			.wp-block-navigation-link__container {
-				background-color: var(--wp--custom--color--background);
-				border-color: var(--wp--custom--color--tertiary);
-			}
+		.wp-block-navigation__submenu-container {
+			background-color: var(--wp--custom--color--background);
+			border-color: var(--wp--custom--color--tertiary);
 		}
 	}
 
@@ -37,13 +34,12 @@
 					.wp-block-navigation-link__content {
 						margin-right: 0;
 					}
-					.submenu-container,
-					.wp-block-navigation-link__container{
-						margin-right: -19px;
+					.wp-block-navigation__submenu-container{
+						gap: 0;
 						padding: 0 19px 0 0;
 						border-right: 1px solid var(--wp--custom--color--foreground);
 						.wp-block-pages-list__item__link,
-						.wp-block-navigation-link__content {
+						.wp-block-navigation-item__content {
 							padding: 0;
 							font-size: var(--wp--custom--font-sizes--tiny);
 							line-height: 40px;
@@ -52,9 +48,14 @@
 				}
 			}
 			.wp-block-navigation__container{
-				padding-top: 50px;
 				align-items: flex-end;
+				gap: 0;
 			}
 		}
+		.wp-block-social-links {
+			position: absolute;
+			flex-direction: column;
+			padding-top: 36px;
+		}
 	}
 }

mayland-blocks/block-template-parts/header.html

@@ -3,6 +3,6 @@
 <!-- wp:site-logo /-->
 <!-- wp:site-title /-->
 <!-- wp:site-tagline {"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
-<!-- wp:navigation {"textColor":"foreground-light","fontSize":"small","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
 </div>
 <!-- /wp:group -->

quadrat/assets/theme.css

@@ -307,8 +307,7 @@ ul ul {
 	text-decoration: underline;
 }
 
-.wp-block-navigation:not(.has-background) .wp-block-navigation__container .submenu-container,
-.wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container {
+.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
 	background-color: var(--wp--custom--color--background);
 	border-color: var(--wp--custom--color--tertiary);
 }
@@ -336,31 +335,31 @@ ul ul {
 	margin-right: 0;
 }
 
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container {
-	margin-right: -19px;
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container {
+	gap: 0;
 	padding: 0 19px 0 0;
 	border-right: 1px solid var(--wp--custom--color--foreground);
 }
 
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container .wp-block-pages-list__item__link,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .submenu-container .wp-block-navigation-link__content,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container .wp-block-pages-list__item__link,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation-link__container .wp-block-navigation-link__content,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container .wp-block-pages-list__item__link,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .submenu-container .wp-block-navigation-link__content,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container .wp-block-pages-list__item__link,
-.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation-link__container .wp-block-navigation-link__content {
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-pages-list__item.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container .wp-block-pages-list__item__link,
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation-link.has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
 	padding: 0;
 	font-size: var(--wp--custom--font-sizes--tiny);
 	line-height: 40px;
 }
 
 .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
-	padding-top: 50px;
 	align-items: flex-end;
+	gap: 0;
+}
+
+.wp-block-navigation.is-responsive .wp-block-navigation__responsive-container.is-menu-open .wp-block-social-links {
+	position: absolute;
+	flex-direction: column;
+	padding-top: 36px;
 }
 
 .wp-block-post-comments form input:not([type=submit]):not([type=checkbox]),

quadrat/sass/blocks/_navigation.scss

@@ -10,12 +10,9 @@
 		}
 	}
 	&:not(.has-background) {
-		.wp-block-navigation__container {
-			.submenu-container,
-			.wp-block-navigation-link__container {
-				background-color: var(--wp--custom--color--background);
-				border-color: var(--wp--custom--color--tertiary);
-			}
+		.wp-block-navigation__submenu-container {
+			background-color: var(--wp--custom--color--background);
+			border-color: var(--wp--custom--color--tertiary);
 		}
 	}
 
@@ -37,13 +34,12 @@
 					.wp-block-navigation-link__content {
 						margin-right: 0;
 					}
-					.submenu-container,
-					.wp-block-navigation-link__container{
-						margin-right: -19px;
+					.wp-block-navigation__submenu-container{
+						gap: 0;
 						padding: 0 19px 0 0;
 						border-right: 1px solid var(--wp--custom--color--foreground);
 						.wp-block-pages-list__item__link,
-						.wp-block-navigation-link__content {
+						.wp-block-navigation-item__content {
 							padding: 0;
 							font-size: var(--wp--custom--font-sizes--tiny);
 							line-height: 40px;
@@ -52,9 +48,14 @@
 				}
 			}
 			.wp-block-navigation__container{
-				padding-top: 50px;
 				align-items: flex-end;
+				gap: 0;
 			}
 		}
+		.wp-block-social-links {
+			position: absolute;
+			flex-direction: column;
+			padding-top: 36px;
+		}
 	}
 }

seedlet-blocks/assets/theme.css

@@ -158,7 +158,7 @@
 }
 
 .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-link {
-	font-family: var(--wp--preset--font-family--headings);
+	font-family: var(--wp--preset--font-family--playfair-display);
 	font-size: 32px;
 	font-weight: 400;
 	line-height: 60px;
@@ -170,16 +170,6 @@
 	line-height: 30px;
 }
 
-.wp-block-navigation__responsive-container:not(.has-modal-open) .wp-block-social-links {
-	flex-basis: 100%;
-}
-
-/* NOTE: This can be removed when the rendering of the Navigation block, rendered with a Classic data source (by way of __unstableLocation),
-is passed all of the block attributes on the block definition in the template. */
-.wp-block-navigation__container {
-	justify-content: center;
-}
-
 .wp-block-post-comments #comments,
 .wp-block-post-comments #reply-title {
 	font-style: italic;

seedlet-blocks/block-template-parts/header.html

@@ -8,7 +8,7 @@
 
 <!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->
 
-<!-- wp:navigation {"itemsJustification":"center","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"center","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
 
 <!-- wp:spacer {"height":60} -->
 <div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>

seedlet-blocks/sass/blocks/_navigation.scss

@@ -1,9 +1,7 @@
 .wp-block-navigation__responsive-container {
 	&.has-modal-open {
 		.wp-block-navigation-link {
-			//NOTE: For reasons I cannot explain... if I set this to use the --wp--preset--font-family--headings
-			//these values (which are what are set) are not respected in the modal.
-			font-family: var(--wp--preset--font-family--headings);
+			font-family: var(--wp--preset--font-family--playfair-display);
 			font-size: 32px;
 			font-weight: 400;
 			line-height: 60px;
@@ -16,14 +14,4 @@
 			}
 		}
 	}
-
-	&:not(.has-modal-open) .wp-block-social-links {
-		flex-basis: 100%;
-	}
-}
-
-/* NOTE: This can be removed when the rendering of the Navigation block, rendered with a Classic data source (by way of __unstableLocation),
-is passed all of the block attributes on the block definition in the template. */
-.wp-block-navigation__container {
-	justify-content: center;
 }

skatepark/assets/theme.css

@@ -126,9 +126,8 @@
 	padding-left: calc( max( 0.5 * ( 100% - var(--wp--custom--layout--wide-size) ) + var(--wp--custom--gap--horizontal), var(--wp--custom--gap--horizontal) ));
 }
 
-.wp-block-navigation.is-responsive .has-child .wp-block-navigation-link__container {
-	background-color: var(--wp--custom--color--background);
-	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
+.wp-block-navigation {
+	font-size: var(--wp--preset--font-size--small);
 }
 
 .wp-block-post-comments .reply a {

skatepark/block-template-parts/header.html

@@ -9,7 +9,7 @@
 
 <!-- wp:group {"className":"nav-links"} -->
 <div class="wp-block-group nav-links">
-	<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"fontStyle":"normal","fontWeight":"900","textTransform":"uppercase"}},"fontSize":"small","__unstableSocialLinks":"social"} /-->
+	<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","orientation":"horizontal","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","style":{"typography":{"fontStyle":"normal","fontWeight":"900","textTransform":"uppercase"}},"__unstableSocialLinks":"social"} /-->
 </div>
 <!-- /wp:group -->
 </div>

skatepark/sass/blocks/_navigation.scss

@@ -1,7 +1,5 @@
-// See https://github.com/WordPress/gutenberg/issues/34648
-.wp-block-navigation.is-responsive {
-	.has-child .wp-block-navigation-link__container {
-		background-color: var(--wp--custom--color--background);
-		border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
-	}
+//NOTE: Setting the font size as a block attributes forces ALL elements to have that font size
+//preventing mobile menu items (and sub-menu items) from having a different size value
+.wp-block-navigation {
+	font-size: var(--wp--preset--font-size--small);
 }

videomaker/assets/theme.css

@@ -64,7 +64,7 @@ div.post-meta a {
 	align-items: flex-end;
 }
 
-.wp-block-navigation.is-responsive .has-child .wp-block-navigation-link__container {
+.wp-block-navigation.is-responsive .has-child .wp-block-navigation__submenu-container {
 	background-color: var(--wp--custom--color--background);
 	border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
 }

videomaker/block-template-parts/header.html

@@ -3,6 +3,6 @@
 	<!-- wp:site-logo /-->
 	<!-- wp:site-title /-->
 	<!-- wp:site-tagline /-->
-	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
+	<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary","__unstableSocialLinks":"social"} /-->
 </header>
 <!-- /wp:group -->

videomaker/child-theme.json

@@ -160,6 +160,12 @@
 					"textTransform": "uppercase"
 				}
 			},
+			"core/navigation-link": {
+				"color": {
+					"background": "transparent",
+					"text": "var(--wp--custom--color--foreground)"
+				}
+			},
 			"core/post-date": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"

videomaker/sass/_navigation.scss

@@ -1,12 +1,4 @@
 // Needed until this is merged: https://github.com/WordPress/gutenberg/issues/35040
 .is-vertical.items-justified-right ul.wp-block-navigation__container {
 	align-items: flex-end;
-}
-
-// See https://github.com/WordPress/gutenberg/issues/34648
-.wp-block-navigation.is-responsive {
-	.has-child .wp-block-navigation-link__container {
-		background-color: var(--wp--custom--color--background);
-		border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
-	}
-}
+}

videomaker/theme.json

@@ -494,6 +494,12 @@
 					"textTransform": "uppercase"
 				}
 			},
+			"core/navigation-link": {
+				"color": {
+					"background": "transparent",
+					"text": "var(--wp--custom--color--foreground)"
+				}
+			},
 			"core/post-terms": {
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--small)"