From 1e609fb89b9483aa8c89b1dfc8f2c72e26956139 Mon Sep 17 00:00:00 2001
From: scruffian <ben@scruffian.com>
Date: Tue, 24 Oct 2023 11:48:02 +0200
Subject: [PATCH] reduce CSS specificity so that we can customize the overlay
 using theme.json

---
 packages/block-library/src/navigation/index.php  |  1 +
 packages/block-library/src/navigation/style.scss | 13 ++++++++-----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index 209a8b1c17c16..da35196f59228 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -675,6 +675,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$responsive_container_classes = array(
 		'wp-block-navigation__responsive-container',
+		'wp-block-navigation-overlay',
 		$is_hidden_by_default ? 'hidden-by-default' : '',
 		implode( ' ', $colors['overlay_css_classes'] ),
 	);
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index eb8ef7683e198..1a4c07cf4407b 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -462,6 +462,10 @@ button.wp-block-navigation-item__content {
 		transform: translateY(0);
 	}
 }
+
+:where(.wp-block-navigation__responsive-container.is-menu-open) {
+	background-color: inherit;
+}
 .wp-block-navigation__responsive-container {
 	display: none;
 	position: fixed;
@@ -498,7 +502,6 @@ button.wp-block-navigation-item__content {
 	&.is-menu-open {
 		display: flex; // Needs to be set to override "none".
 		flex-direction: column;
-		background-color: inherit;
 
 		// Animation.
 		animation: overlay-menu__fade-in-animation 0.1s ease-out;
@@ -631,13 +634,13 @@ button.wp-block-navigation-item__content {
 }
 
 // Default menu background and font color.
-.wp-block-navigation:not(.has-background)
-.wp-block-navigation__responsive-container.is-menu-open {
+:where(.wp-block-navigation:not(.has-background)
+.wp-block-navigation__responsive-container.is-menu-open) {
 	background-color: #fff;
 }
 
-.wp-block-navigation:not(.has-text-color)
-.wp-block-navigation__responsive-container.is-menu-open {
+:where(.wp-block-navigation:not(.has-text-color)
+.wp-block-navigation__responsive-container.is-menu-open) {
 	color: #000;
 }