Photo Directory: Mobile menu toggle icon alignment and sizing issue below 600px

[azharderaiya]

On the WordPress Photo Directory, the secondary menu toggle (hamburger icon) displays incorrectly on mobile screens (viewport width ≤599px). The icon appears squashed or misaligned within its container, making the UI look inconsistent with the main site header.

Step to reproduce:

• Go to ​https://wordpress.org/photos/.

• Open Browser Developer Tools and set the resolution to 599px width or less (e.g., iPhone 12 Pro view).

• Observe the menu toggle icon on the right side of the "Photos" sub-header.

[azharderaiya]

photo-directory-hamburger-icon-issue

[darshitrajyaguru97]

Testing Summary

I was able to reproduce the issue on the Photo Directory page at smaller viewport widths.

Environment

• Device: Chrome DevTools (iPhone 12 Pro simulation)
• Viewport: ≤599px
• Browser: Chrome (latest)

Steps to Reproduce

# Visit ​https://wordpress.org/photos/
# Open DevTools and set viewport width to 599px or below
# Observe the secondary menu toggle icon in the "Photos" header

Actual Result

• The menu toggle icon appears misaligned and visually compressed
• The SVG icon does not maintain proper alignment within its container

Expected Result

• The menu toggle icon should be centered and maintain consistent dimensions
• It should visually align with the primary navigation toggle

Root Cause

• The button (.wp-block-navigation__responsive-container-open) lacks enforced dimensions and alignment on smaller screens
• The SVG icon uses fixed dimensions (24x24), which do not adapt well when the parent container shrinks

Suggested Approach

• Ensure the toggle button has a consistent clickable area and proper alignment (e.g., using flexbox)
• Allow the SVG to scale more predictably by controlling its size via CSS instead of relying solely on fixed width/height attributes

Example:

@media (max-width: 599px) {
	.wporg-is-mobile-nav .wp-block-navigation__responsive-container-open {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
	}

	.wporg-is-mobile-nav .wp-block-navigation__responsive-container-open svg {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
	}
}

Notes

• The issue is primarily layout-related rather than an SVG asset issue
• Updating the SVG itself is likely unnecessary unless visual inconsistencies are observed across breakpoints
• Fixing container behavior should resolve the problem consistently

Happy to test a patch or refine further if needed.

[chauhanraj754]

I'd like to work on this issue. Currently investigating the mobile menu toggle misalignment.

## Summary
Fixes the hamburger menu toggle icon in the Photo Directory
mobile navigation bar (≤599px viewport).

## Problem
The first SVG <path> in the menu toggle button was drawing
a chevron/arrow shape instead of a horizontal line, making
the hamburger icon appear incorrectly on mobile.

## Fix
Replaced the incorrect arrow path with the correct horizontal
line path to match the other two lines in the icon.

## Before

## After

## Trac ticket
https://meta.trac.wordpress.org/ticket/8227

[chauhanraj754]

I've investigated this issue and found the root cause: the first SVG
path in the hamburger button was rendering a chevron/arrow shape
instead of a horizontal line.

Submitted a fix here: ​https://github.com/WordPress/wporg-mu-plugins/pull/738

Thanks for the PR! You are correct about where the issue originates, but the fix isn't quite what you proposed.

The true issue is that the function (customize_navigation_block_icon()) didn't fully replace the hamburger menu SVG with the caret/chevron as it intended. It replaced the path for the top line of the hamburger icon with the caret. But the bottom two lines of the hamburger icon weren't removed, which caused the reported issue. Removing the paths for the rest of the original hamburger icon is the true fix here.

Fix incoming.

[coffee2code]

This is duplicate of #8139, though I saw this first, and addressed it via the PR referenced above.

But thanks for reporting the issue, the investigations, and for the PR. As I indicated in the PR, the hamburger menu SVG icon was intentionally being replaced with a caret/chevron SVG icon. However, it did so by replacing the path for the top line of the hamburger icon with the chevron. The bottom two lines of the hamburger icon weren't removed, which caused the reported issue. Removing the paths for the rest of the original hamburger icon is the true fix here.

I've given all the participants here a Meta Contributor badge. Thanks!

This is fixed via ​https://github.com/coffee2code/wporg-mu-plugins/commit/63da9c636dbfb5c9a5c601cebeaf65cf56224f33