Admin bar: Always show site title on mobile and move shortcut menus under it

[fushar]

Trac ticket: https://core.trac.wordpress.org/ticket/65220

Summary

We want to make the site title prominent even on mobile viewport. This helps users quickly identify which site they’re working on, even on smaller screens.

On mobile viewport width, we made the following changes:

• To make room for the site title, hide the site/content-related "shortcut" menus (Updates, Comments, New etc) from the top level and move them under the site menu.
  • This is implemented by duplicating those shortcut menus, and showing/hiding them via CSS depending on the viewport size.
• Move the command palette menu to the top-secondary area (right side).
  • This is also implemented by duplicating the menu as explained above.
• Allow the main left nodes to overflow, while pinning the right-side secondary nodes using position: absolute and right: 0.
  • So, when the site title is long, it flows underneath the right nodes. To make the visual smoother, we add a subtle fade/blur effect to the left edge of the secondary nodes.
  • Note that plugins that show icons on mobile by overriding CSS could get pushed out of view. However, Core's contract is to only show its own nodes on mobile viewport:

wordpress-develop/src/wp-includes/css/admin-bar.css

Lines 1013 to 1016 in 5564370

	/* Show only default top level items */
	#wp-toolbar > ul > li {
	display: none;
	}

Screenshots

600px < width <= 782px

Before	After

400px < width <= 600px

Observe that there's a fade/blur effect that hides the right end of the site title if it's too long.

Before	After

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.7
Used for: CSS and test suggestions.

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props fushar.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.