Mobile Menu: Toggle icons overlap on "Add your plugin" page

[buildbycj]

Hi,

I would like to report a site-wide UI bug regarding the mobile navigation menu.

Issue:
On mobile view, the navigation menu toggle button shows both the "Open" (hamburger) and "Close" (X) icons simultaneously. This appears to be a global issue affecting multiple pages using the wp-block-navigation block, not just the Plugin Directory.

Observation:
The class wp-block-navigation__responsive-container-open appears to be persisting or conflicting, causing the CSS to display both SVG icons at the same time regardless of the specific page.

Steps to reproduce:

1. Go to any WordPress.org page using the standard block navigation (e.g., Plugin Directory, Home, etc.) on mobile.
2. Toggle the menu or observe the closed state.
3. The open and close icons appear superimposed on top of each other.

Screenshot:
​https://www.awesomescreenshot.com/image/57765543?key=be3f9282d3b08f123fd233fdc930e704

I have also attached a screenshot demonstrating the issue.

Thanks!

[khushdoms]

I’m able to reproduce this issue on a real mobile device.

Environment:
Device: iPhone and Android
Browser: Chrome/safari (iOS)
URL tested: ​https://wordpress.org/plugins/

Steps to reproduce:
Visit ​https://wordpress.org/plugins/ on Phone
View the site in mobile mode (default).
Observe the hamburger navigation icon in the header.

Actual result:
Both the menu open (hamburger) and menu close (X) icons are visible at the same time and appear overlapped.

Expected result:
Only one icon should be visible at a time

[khushdoms]

wordpress.org/plugins Navigation hamburger mobile menu issue

[manhphucofficial]

Thanks for the detailed report and reproduction steps.

After further inspection, it looks like the currently visible icon on mobile is not the standard hamburger (open) / close (X) toggle overlap described in the original report.

The rendered SVG appears to contain multiple <path> elements at the same time (e.g. horizontal bars combined with a directional arrow), resulting in a visually merged “filter/sort” style icon rather than two distinct navigation toggle icons.

This suggests the issue may be related to the block navigation SVG rendering or inherited block styles from the Gutenberg navigation block, rather than a persistent .wp-block-navigation__responsive-container-open state alone.

It may be worth splitting this into a separate issue or clarifying whether this is a different regression affecting the mobile navigation icon SVG output.

## Summary

This PR fixes an issue on small screens where the navigation toggle icon in the local navigation bar displayed both the chevron and hamburger lines at the same time, resulting in a visually cluttered toggle.

The update hides the horizontal “hamburger” paths in the toggle SVG while keeping the chevron visible, aligning the icon with the intended collapsed navigation design.

## Details

• Scoped to the local navigation bar only.
• Uses CSS to target the extra SVG paths rendered by core/navigation.
• No changes to markup or JavaScript behavior.
• Improves visual clarity without affecting accessibility or interaction.

## Testing

• Tested on mobile viewport sizes.
• Verified that only the chevron icon is visible for the navigation toggle.
• Confirmed that opening and closing the navigation menu behaves as expected.

Fixes https://meta.trac.wordpress.org/ticket/8139