Maywood - Submenu Does Not Indent on Safari

[ktyfuller604]

Quick summary

On both iPhone and Safari/Mac, nested / submenus have no indentation and is missing the - (dash). On Chrome the indent and dash both appear.

Steps to reproduce

1. Activate the Maywood theme on any site
2. Create a menu with nested navigation items
3. Check on Safari and iPhone

A clear and concise description of what you expected to happen.

Submenu items should be indented and have a dash before each one.

What actually happened

The submenu items were flush with the parent item and there were no dashes.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

The following CSS code worked to target just Safari and indent the submenus. It does not add the dashes.

/** Safari Fix for Submenu Indents  **/
@supports (-webkit-hyphens:none)  {
.main-navigation > div > ul ul {
    padding-left: 20px;
}
}

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

9073021-zd-a8c

[github-actions]

Support References

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

• 9073021-zen

[jartes]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

Here's how I see it on a simple site:

Small safari window	iPhone 13

📌 ACTIONS

• Triaged
• Adding to T-Rex board - @Automattic/t-rex adding this one to your board. Thank you!

📌 Message to Author
@ktyfuller604 Thanks for reporting this one, Kate! 🙌🏻