Make WordPress Core

Opened 2 years ago

Last modified 10 months ago

#55773 new enhancement

FSE navigation menu - styling problem

Reported by: jim5471's profile jim5471 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Menus Keywords:
Focuses: Cc:


WordPress 5.9.3 running Twenty Twenty-Two theme
also WordPress 6.0-RC3 running Twenty Twenty-Two theme
No plugins active

There seems to be a problem with the styling of the FSE navigation menu.

Looking at the WordPress website the navigation menu is styled (in blue) to show which page you are on and in the case of a nested menu item it shows both the the subpage and the ancestor menu item.

But this isn't working reliably on FSE.

With a similar menu I have found that the styling is absent in the following cases...

the homepage which was the 'Front Page'
with a nested menu of 2 subpages the styling was absent on the first subpage which was the 'Posts Page'
with a nested menu and a subpage selected the styling is absent on the menu-ancestor

Styling is provided by "current-menu-item" Class in the li tag.

"aria-current='page'" is also absent from the link when the styling isn't working.

Maybe someone can confirm this is a bug - thanks.

Change History (4)

#1 @mrfoxtalbot
19 months ago

I came to report this. The CSS class is there, current-menu-item, but Twenty Twenty-Two does not seem to be providing any styles to differentiate this type of menu item in any way.

#2 @mrfoxtalbot
13 months ago

This is still an issue with Twenty Twenty-Three. It came up in forum thread again.

Please note that there is a separate GitHub issue discussing this problem in the context of the Navigation Block itself.

#3 @rchrzanwlc
11 months ago

Hi @mrfoxtalbot I think i'ts not a bug but things to improvement on theme side because uses which is additional features. If you want to add some style to your theme, make a child theme and add some additional CSS to style current-menu-item.

For now we no have possibilities to modify these kind of settings by theme.json for example.

#4 @mrfoxtalbot
10 months ago

  • Type changed from defect (bug) to enhancement
Note: See TracTickets for help on using tickets.