Admin: Layout for the quick-nav buttons pinned into the header rail

2026-08-13T01:00:51Z

Layout for the quick-nav buttons pinned into the header rail

New page

/**
* Quick-navigation buttons pinned into the Citizen header rail.
*
* Citizen renders an EMPTY <div class="citizen-header__start"> in Header.mustache
* and never populates it — no config and no hook reaches it. MediaWiki:Common.js
* fills it with links; this gives that slot the same layout the populated
* "__end" group already has.
*
* --header-direction is Citizen's own variable, so this follows
* $wgCitizenHeaderPosition automatically (column in the left/right rail, row if
* the header is ever moved to top/bottom).
*
* The buttons themselves need no styling here: Common.js reuses Citizen's own
* cdx-button classes, so they inherit the exact look of the preferences and
* user-menu buttons already in the rail.
*
* If a Citizen upgrade renames .citizen-header__start, the buttons simply stop
* appearing and the hamburger menu still has everything. See GOTCHAS #30.
*/
.citizen-header__start {
display: flex;
flex-shrink: 0;
flex-direction: var( --header-direction );
gap: var( --space-xxs );
}

MediaWiki:Common.css - Revision history

Admin: Layout for the quick-nav buttons pinned into the header rail