Navigation Block: When menu is center aligned on mobile, there is no indent or visual indicator for sub-menu items.

[jordesign]

Description

When using the Navigation Block to create submenus, the mobile view doesn't indicate which is a submenu. This only happens when the menu items are aligned as center.

It seems themes could provide styling for sub-menu items - but it would be good to have sensible defaults as well.

Step-by-step reproduction instructions

• Create a site with Munchies theme. (or any theme)
• Create a menu & add submenus (page links).
• (If not already), center the menu items.

What I expected to happen

When the menu items are aligned left or right, the submenus are indented.

What actually happened

When the menu items are centered, there is no indication of the submenu.

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.1
GB 14.4.0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

How should the submenus be indicated? What kind of style change do you expect or propose?

[jordesign]

I'm happy for that decision to be made by someone with more design expertise... But off the top of my head...

• We could append a hyphen before child/sub-items. or
• Default back to left alignment when the mobile nav is used. or
• introduce tools to change styling/alignment at different break points

[antonyjsmith]

I'd suggest they are collapsed [or not] and have a caret icon next to them the same as on the desktop menu which would also address #44346 and make menu behaviour between desktop and mobile more consistent

[jordesign]

I'm willing to close this - as the new 'arrow' and 'click to open' functionality coming in WP6.3 allows allows workarounds for folks who want to center align their menu.