Make WordPress Core

Opened 6 months ago

Last modified 3 months ago

#59924 new defect (bug)

Twenty Nineteen: The navigation block submenu button is unreadable

Reported by: poena's profile poena Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch changes-requested
Focuses: css Cc:


The navigation block has an option called "Open on click" that is available when there is a submenu.
When the option is enabled, the parent menu item is a <button> element.
On the front of the website, this button inherits the background styles from the themes button CSS:

button:hover, button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
	background: #111;
	cursor: pointer;

So when the themes default colors are used and someone hovers over the button, the background and text has the same colors, and the text is not readable.

Testing instructions:

Activate Twenty Nineteen
Make sure that your WordPress installation has some content that you can place in the navigation block, because you will need to create a submenu.

Create a new post or page.
Add a navigation block. In the block, select the inserter and add a link: this will be your parent menu item. Click on the link and select the option "Add submenu". Add a link.

Go to the front of the website.
Locate the navigation and hover over the link item that has the submenu.
Confirm that both the text and the background are dark grey, close to black.

Change History (11)

#1 @sabernhardt
6 months ago

#59925 was marked as a duplicate.

This ticket was mentioned in PR #5703 on WordPress/wordpress-develop by TalhaQuddoos.

6 months ago

  • Keywords has-patch added; needs-patch removed

In src/wp-content/themes/twentynineteen/style.css, I added the following lines in the end: .wp-block-navigation-submenu__toggle:hover, .wp-block-navigation-submenu__toggle:hover+.wp-block-navigation__submenu-icon, .wp-block-navigation-submenu__toggle:focus, .wp-block-navigation-submenu__toggle:focus+.wp-block-navigation__submenu-icon
  color: #fff;

Trac ticket:

#4 @talhaquddoos
6 months ago

  • Keywords has-patch added; needs-patch removed

This ticket was mentioned in PR #5704 on WordPress/wordpress-develop by @sabernhardt.

6 months ago

This keeps the background color transparent when hovering or focusing on the toggle button.

It also removes the padding and resets the focus outline offset and border radius.

Below are images showing the focus outline for both the arrow button and the toggle button that includes the text.

Trac 59924

#6 @sabernhardt
6 months ago

  • Focuses css added

If changing the text color is better than making the background consistently transparent, that patch would need to edit styles in SCSS files and compile to style.css and style-rtl.css.

However, I think these buttons should adjust padding and the outline offset, so I made another option.

#7 @mukesh27
6 months ago

Thanks @sabernhardt for the PR. Left one minor feedback for consideration.

#8 @poena
4 months ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 6.5

I have tested the PR and it works well, it solves the issue.
-I think the padding can stay as it is in the PR without change.

I also applied the style change in the theme on top of 6.5-alpha-5737 and re-built the CSS files, and the styling is correct there as well.

#9 @poena
4 months ago

It is perhaps a bit of a strange look that the links are underlined, but the button has no bottom border, but I'm fine with fixing the part that is breaking.

#10 @sabernhardt
4 months ago

  • Keywords changes-requested added; needs-testing removed

The modal open and close buttons have the same color issue on screens narrower than 600 pixels.

#11 @poena
3 months ago

  • Milestone changed from 6.5 to Future Release
Note: See TracTickets for help on using tickets.