Radcliffe 2: second-level menu items (dropdown menus) don't work on mobile

[ariel-maidana]

Quick summary

When Radcliffe 2 is active, second and third-level menu items don't show up when you open the overlay menu.

Steps to reproduce

1. Activate Radcliffe 2.
2. Create a multi-level navigation menu and assign it to the site header.
3. Open the site on mobile.
4. Tap on the navigation menu to open it.

What you expected to happen

I would expect to see the whole menu, including the sub-menus.

What actually happened

Only the first-level items are visible, and the rest (second-level and beyond) are not accessible.

Browser

No response

Context

8052490-zd

Platform (Simple, Atomic, or both?)

Simple, Atomic

Other notes

• It might be related to this: https://github.com/Automattic/wp-calypso/issues/57369 However, in this case, deactivating Page Optimize on a test Atomic site didn't solve the issue.

Reproducibility

Consistent

Severity

All

Available workarounds?

None

Workaround details

No response

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 8052490-zen
• [ ] 8068561-zen
• [ ] 8088184-zen
• [ ] 8097264-zen
• [ ] 8105953-zen

[rickmgithub]

📌 REPRODUCTION RESULTS

• Tested on Atomic – Replicated as per OPs instructions

https://github.com/Automattic/themes/assets/13706336/d9870245-e838-498b-9dee-9126da4ef22f

📌 ACTIONS

Triaged

[ariel-maidana]

Another case here: 8068561-zen

[jp-imagines]

Another report here: 8088184-zd-a8c

Took a closer look into this and found that the sub-menus are accessible – on Radcliffe 2, they aren't visible by default on mobile, but there's a button on the side to expand them. The issue here isn't that the sub-menu items are inaccessible, it's that the SVG icon for that expand button isn't displaying.

Specifically, the SVG element has an inner <use> element with an invalid URL, so no icon is loaded. That's similar to the behavior in https://github.com/Automattic/wp-calypso/issues/55795#issuecomment-1218075472, though the context there is entirely different.

See the HTML output for the nav menu on the Radcliffe 2 demo site, including the invalid #icon-expand URL for the <use> element:

Some CSS can be used to add a down-arrow icon (▼), which flips up when the button is tapped. It may not be perfect, but it's a viable workaround in the meantime:

.menu-menu-container .dropdown-toggle::before {
    content: "\25BC";
}

[rickmgithub]

Another report focused on the missing down arrow - https://github.com/Automattic/themes/issues/7753

[zmprunella]

Another case here: 8097264-zen

[liviopv]

8105953-zd-a8c

[liviopv]

It's the same issue as https://github.com/Automattic/themes/issues/7711, closing as duplicate.