WordPress Admin Menu as a Top Horizontal Bar

The WordPress admin menu is a tall sidebar on the left. On a wide screen that is fine, but on a laptop it takes 160px of every screen, and with a long list of plugin menus you scroll the sidebar to reach Settings. This CSS moves the WordPress admin menu to a horizontal bar at the top, with the submenus as dropdowns.

It is CSS only, so nothing in WordPress changes: the same menu items, the same order, the same permissions. The collapsed (folded) menu becomes a smaller icon bar. Below 782px WordPress keeps its own mobile menu.

The CSS

/* Horizontal wp-admin menu (dpc). Desktop only; below 782px WordPress keeps its mobile menu. */
@media (min-width: 782px) {
	#wpcontent,
	#wpfooter {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Room for the menu bar above the content. */
	.wp-admin #wpbody-content {
		margin-top: 80px;
	}

	.wp-admin.folded #wpbody-content {
		margin-top: 50px;
	}

	#adminmenu,
	#adminmenuback,
	#adminmenuwrap {
		width: 100% !important;
		margin: 0;
	}

	#adminmenuwrap,
	#adminmenuback {
		position: fixed !important;
		bottom: auto;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.15);
	}

	#adminmenu {
		display: flex;
	}

	#adminmenu > li {
		display: block;
	}

	#adminmenu > li::after,
	#adminmenu > li > a::after {
		display: none !important;
	}

	#adminmenu a.menu-top {
		padding: 10px 4px;
		opacity: 0.5;
		transition: opacity 0.2s ease-in, box-shadow 0.3s ease-in;
	}

	.folded #adminmenu a.menu-top {
		padding: 5px 0;
	}

	#adminmenu a.wp-has-current-submenu,
	#adminmenu a.current,
	#adminmenu li.current a,
	#adminmenu a.menu-top:hover,
	#adminmenu a.menu-top:focus {
		opacity: 1;
	}

	#adminmenu a.menu-top:hover,
	#adminmenu a.menu-top:focus {
		box-shadow: inset 0 -5px 0 0 currentColor;
	}

	#adminmenu div.wp-menu-image {
		display: flex;
		width: 100%;
		justify-content: center;
		align-items: center;
		float: none;
		padding: 0;
	}

	#adminmenu div.wp-menu-name {
		padding: 8px;
		font-size: 10px;
		text-align: center;
	}

	/* Submenus open as dropdowns on hover and on keyboard focus. */
	#adminmenu .wp-submenu {
		position: absolute !important;
		top: -1000em !important;
		margin-top: 0 !important;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
	}

	#adminmenu li:hover .wp-submenu,
	#adminmenu li:focus-within .wp-submenu {
		top: 100% !important;
		left: 0 !important;
	}

	#adminmenu #collapse-menu {
		margin: auto 0;
	}

	#adminmenu #collapse-menu .collapse-button-label {
		display: none;
	}

	/* The WooCommerce admin header is fixed to the left of the old sidebar and would cover the menu. */
	.woocommerce-layout__header,
	.woocommerce-layout__activity-panel-wrapper {
		display: none;
	}

	.woocommerce-page #wpbody-content,
	.woocommerce-page #wpbody {
		margin-top: 0 !important;
	}
}

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Admin only, tick Header under Script location, set Header Mode to CSS, paste the CSS and publish.

With Admin only Scripts Organizer prints the CSS in the <head> of every wp-admin page and never on the front end. No PHP is needed.

How it works

#adminmenuwrap and #adminmenuback keep their position: fixed, but get the full width and no bottom, so the dark sidebar becomes a bar along the top of the screen.
#adminmenu becomes a flex row. The icon sits above a small 10px label, and the inactive items are dimmed to 50% so the current section stands out.
The content area loses its left margin and gets a top margin of 80px (50px when folded), the height of the bar.
Submenus are moved off screen and shown under their item on :hover and on :focus-within, so they also open when you tab through the menu with the keyboard.
The WooCommerce admin header is fixed next to the old sidebar and would cover the new bar, so it is hidden on WooCommerce screens.

Customise it

Bigger labels: raise font-size on #adminmenu div.wp-menu-name, and raise the margin-top of #wpbody-content by the same amount so content does not slide under the bar.
No dimming: delete opacity: 0.5; from #adminmenu a.menu-top.
Colours come from the user’s admin colour scheme. To change them, see Color Admin Menu Items.

Gotchas

With many plugin menus the bar can be wider than the screen. The extra items then sit off the right edge; fold the menu or hide menus you don’t use.
Hiding the WooCommerce header also hides its activity panel (inbox, orders, stock). Its pages still work; delete the last two rules if you need the panel.
The CSS overrides core admin styles with !important. A future WordPress release that changes the menu markup can break the layout, so check it after major updates.
Plugins that add their own fixed sidebars or top bars in wp-admin can overlap the menu bar.

The older version of this post had the same layout; this version adds keyboard access to submenus and replaces the rgb(0 0 0 / 20%) shorthand with a plain rgba() value.

In the Scripts Organizer library Import it with one click from Scripts Organizer.