fix: #3622670 Render the site header as the design's black bar

Rajab Natshahrequested to merge
issue/rightup-3622670:3622670-the-site-header into 1.0.x

Problem

On a fresh install the site header renders white: computed background rgb(255, 255, 255), navigation links rgb(0, 0, 0), and the dark wordmark rightup-logo.svg.

The design (VBN stylesheet, header-desktop frame) is a black bar with the white wordmark and its teal "the", white navigation, a white search icon and a teal Newsletter button. The teal live-feed strip directly below the header already matches, which makes the white bar above it read as a mistake.

Issue: https://www.drupal.org/project/rightup/issues/3622670

The change

Three values in the header page region, no theme change and no new component version:

  • the region's root section: background_color none -> bg-black, text_color auto -> text-white
  • the search icon-toggle: icon_color text-body -> text-white

bg_edge2edge was already true, so the black spans the viewport while the content stays in the container. The footer region already uses bg-black the same way.

Nothing is needed in the theme: templates/block/block--system-branding-block.html.twig already ships both wordmarks as brand-logo-on-light / brand-logo-on-dark, and scss/base/vartheme.base.scss hides the light one and reveals the dark one inside .bg-black (its $rightup-dark-section-backgrounds list). rightup-logo-white.svg already ships with the theme.

Verification

Fresh ddev drush si -y ../recipes/rightup on Drupal CMS 2.1.4 (core 11.4.6) with this branch:

Check Before After
header section classes ... bg-edge2edge ... bg-black text-white bg-edge2edge
wordmark rendered rightup-logo.svg (brand-logo-on-dark hidden) rightup-logo-white.svg (brand-logo-on-light hidden)
navigation link colour rgb(0, 0, 0) white on black
Newsletter button - accent teal rgb(0, 245, 212), black label
offcanvas navigation collapsed collapsed (unchanged)

Captured at 1440px with the offcanvas collapsed: black bar, white wordmark with the teal "the", the seven main-menu links in white, white search icon, teal Newsletter button - matching the design frame.

Note for reviewers

Editing this region's config on an already-installed site did not change the rendered header (a padding_block_start: pt-5 probe still rendered pt-3, while the footer region's installed values do render). The change was therefore verified on a fresh install, which is how the recipe delivers it. Worth a separate look; it is not caused by this change.

Screenshots (after the fix, fresh install, offcanvas collapsed)

Width
Desktop 1440px Header at 1440px
Tablet 768px Header at 768px
Mobile 375px Header at 375px

At 1440px and 768px the header matches the design. At 375px the section's three columns stack, because section documents columns as a tablet/desktop preset that stacks on mobile; that mobile layout needs a theme-side change and is not claimed as fixed here.

Checkpoints

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • Developer Documentation support
  • User Guide Documentation support
  • UX/UI designer responsibilities
  • Accessibility and Readability
  • Reviewed by a human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Update Release Notes
  • Release

AI-Generated: Yes

Edited by Rajab Natshah

Merge request reports