Header inside full-width background image pattern: color contrast problem for submenus and mobile nav overlay

[abrightclearweb]

For this pattern, there is a problem with submenu items. On hover or focus, the text color is white on a white background, so they don't show. On focus, you can see a black outline round the focused item but no text or icon.

For a mobile viewport, the entire menu and the close button are invisible. You can see this at ​https://wordpress.org/patterns/pattern/header-inside-full-width-background-image/ when you choose the Narrow viewport and trigger the mobile menu.

I have tested with multiple themes on Chrome 148 and Firefox 150 and attached screenshots for Twenty Twenty Five.

[joedolson]

This comes from .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container having a background color set as #fff while the block container parent has .has-white-color class.

The menu needs it's own coloring.

Setting this to 6.7, as that's when Twenty Twenty-Five shipped, but haven't actually tested Twenty Twenty-Five v1 with WP 6.7.

## Summary

• Adds a bundled header-inside-full-width-background-image pattern to Twenty Twenty-Five.
• Gives the navigation block its own overlay colors (overlayBackgroundColor: base, overlayTextColor: contrast) so submenus and the mobile menu overlay remain readable when the main navigation uses white text on a dark background.

## Problem

The Pattern Directory version sets textColor: white on the navigation block but does not set overlay colors. Core navigation CSS gives submenus a white background while text inherits white from the parent, producing invisible submenu items and an invisible mobile overlay.

## Solution

Per core committer feedback, the navigation block needs its own coloring via block attributes — matching other Twenty Twenty-Five header patterns. No theme CSS overrides are needed; core navigation handles overlay/submenu colors when these attributes are present.

[poena]

Hi

The pattern is provided by WordPress.org, but it is not part of core, it is fetched from the remote pattern directory. There is no code related to this pattern that can be updated in core.

Pinging @chetan200891 since the WordPress.org pattern team should be able to safely adjust the navigation block overlay text color settings on their end (This change will not affect patterns that users have already placed).

---

The user sometimes needs to adjust settings for pre-made patterns to work, and older patterns tend to break in worse ways because the block settings change over time.

A theme can only target patterns with custom CSS (such as correcting the text color) if the pattern has a unique selector, like a CSS class name. Unfortunately this pattern does not provide one.

A theme can unregister the patterns provided by WordPress.org, but in this case I would recommend that the user changes the colors to ones that works best for their particular situation. It is the only solution that ensures that it will work with their theme and pattern placement.

After inserting the pattern, select the "Edit pattern" button to access the settings of the blocks inside the pattern.
Select the navigation block. In this pattern, it is the block with the custom name "Menu".
Open the Styles tab in the settings panel of the navigation block.
In the Color panel, change the color of the option "Submenu and overlay text".

[sabernhardt]

I agree to close the ticket. A Navigation block with a specific text color but without background or submenu colors can have contrast problems in any theme.

If there is a reasonable way to accommodate similar situations with the Navigation block styles, that suggestion would belong on the Gutenberg repository.

Twenty Twenty-Two has patterns with Navigation blocks inside a Cover block, but those do not have the contrast problem with submenus or the modal overlay.

• 'Simple dark about page'
• 'Header with image background'
• 'Header with image background and overlay'