Hi @ashley_c,
The three symptoms you describe usually have one cause: the bar lives in the wrong place.
In Twenty Twenty-Five the header is a template part called “Header”, and all eight templates of the theme (pages, posts, archives, 404, home) use that same part. Anything you add there shows on every page. If the bar only shows on the home page, it was most likely added to the home page’s content (Pages > Edit) or to the home template itself, not to the Header part.
How to build it in the right place:
- Appearance > Editor > Patterns > Template parts > Header (or click the header on any page in the editor and choose “Edit” on the Header part).
- In the List View (the icon with three lines, top left) you’ll see Group > Group > Group(Row). Select the outermost Group and insert a Row block (Group > Row) as its first child, above the existing inner Group. Placed there it spans the full width.
- On the Row: Styles tab > Color > Background: pick a custom color and paste your logo blue as a hex value (e.g. #0a4f9c). Text: white. Layout: Justification “Space between”, Align “Full width”.
- Inside the Row: on the left a Paragraph with the phone number and e-mail (or two paragraphs in a small Row), on the right the Social Icons block.
- Save, and in the save dialog make sure the “Header” checkbox is ticked (the dialog lists each changed item separately; if only the template is ticked the part change is lost).
About the bar being white instead of blue on the home page: block colors are inline styles, so if the editor shows blue and the live page shows white, you’re most likely looking at a cached copy of the page. Check the page in a private window while logged out, and purge your caching plugin / host cache. “Shows for a moment, then gets pushed off the top” on other pages I can’t diagnose without seeing it; rebuild the bar as above first, it normally disappears with the misplacement.
When some text turns white and some refuses to, it’s almost never a CSS problem; it’s a priority problem inside the editor. Text color can be set at three levels, and the most specific one wins:
- Site-wide: Styles > Colors, or Styles > Blocks > Heading / Paragraph.
- On a container: a Group, Columns or Column block with its own Text color.
- On the block itself: the Heading or Paragraph has its own Text color, or part of the text has an inline “Highlight” color (the A-with-a-bar button in the text toolbar).
Setting white on the Group (level 2) does nothing for a heading that has its own color (level 3), and nothing at all for a Highlight, which is applied to the words themselves. Patterns and imported starter content very often set colors at level 3, which is exactly the “I changed the parent, nothing happened” experience.
How to fix each one:
- Click directly on the text, e.g. “essential services”. The sidebar shows Heading or Paragraph. Open the Styles tab (half-moon icon) > Color > Text. If a swatch is set, that’s the override: click it and choose Clear, or pick white.
- If Text is empty but the words still don’t change, select the words themselves, open the toolbar’s “More” (⌄) > Highlight, and clear the color there. Highlighted text shows as a element.
- If the text is a link or a button, it’s controlled by Color > Link (or the Button block’s own colors), not by Text.
- The “READY TO TAKE THE NEXT STEP?” section directly above the footer: if you can’t select it while editing the page, it belongs to the template or the Footer template part, not to the page. Edit it in Appearance > Editor; the fix is the same once you’re in the right place.
CSS as a last resort, if you prefer: select the Group that contains the section, Advanced > Additional CSS class(es): white-text. Then in Appearance > Editor > Styles > (three dots) > Additional CSS:
.white-text,
.white-text :is(h1, h2, h3, h4, h5, h6, p, li, a, mark) {
color: #fff !important;
}
!important is needed only because the editor writes those block and highlight colors as inline styles, which beat any normal rule. Clearing them in the editor is the cleaner fix.
CENTER LOGO ON MOBILE:
There’s no per-device setting for this in the block editor (the Row block’s justification applies to all screen sizes), so it’s a small CSS rule, but a safe one.
Twenty Twenty-Five’s header is a Row with the logo/title on the left and the navigation on the right. On phones the navigation collapses into the menu button below 600px, and that’s the breakpoint to use.
- Appearance > Editor > Patterns > Template parts > Header. In the List View select the Row that contains your logo and the navigation (Group > Group > the Row). Sidebar > Advanced > Additional CSS class(es): header-row. Save (tick “Header” in the save dialog).
- Appearance > Editor > Styles > three-dot menu > Additional CSS:
@media (max-width: 599px) {
.header-row {
flex-wrap: wrap;
justify-content: center;
}
.header-row > :first-child {
flex-basis: 100%;
display: flex;
justify-content: center;
}
}
Result on phones: the logo (or the logo + site title group, whatever is first in the Row) is centered on its own line, and the menu button sits centered below it. If you’d rather keep the menu button on the right, replace justify-content: center in the first rule with justify-content: flex-end. Desktop is untouched.
If you set the navigation’s “Overlay Menu” to “Always”, the menu button also appears on larger screens; use max-width: 781px in that case so the two breakpoints match.
Alternative without CSS: on the same Row set Justification to Center and Orientation to Vertical. That centers the header on every device, including desktop, which may or may not be what you want.
