Header responsive menu styles

[flacoman91]

Updates header, pulls work out of #560

Fixes in this PR include:

Header

• Basic Header Styling update
• Remove left gray border at mobile when no hamburger menu button is there

Banner

• Fixed padding at mobile & desktop widths

To test, go to preview, look at:

• Banner
• Header - Basic demos

Screenshots:

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://cfpb.github.io/design-system-react/pr-previews/pr-582/
Built to branch gh-pages at 2026-05-15 19:29 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[natalia-fitzgerald]

@flacoman91

Basic Header

• Includes: US gov banner, CFPB logo, CFPB green border)
• As a first step, I'd like to make sure that a basic version of the header, without any navigational elements, is aligning with the design specs.
• The implementation matches the specs for the most part.

Confirm:

At desktop:

• US gov banner padding (top and bottom): 7.5px
• Logo: 234px wide x 50px high
  • Check logo source file - What format is needed for the logo?
• Header bar padding (top and bottom): 15px
• Header bar (total height): 80px

At mobile:

• US gov banner padding (top and bottom): 2px
• Logo: 190px wide x 40px high (rendering as 189.594px x 40px - close enough?)
• Header bar padding (top and bottom): 10px
• Header bar (total height): 60px

Mock-ups

Desktop (901px and above)

Tablet and Phone (900px and below)

Completed items

These items may have been completed prior to this PR.

• (Completed)Adjust width of header at desktop to align with cf.gov (consistency fix)
• (Completed) Bug: Remove extra height from US gov banner
• (Completed) Consolidate responsive menu and header component into one Header component in Storybook (usability improvement)
• (Completed) Change the Logout button link to a button (improve accessibility)
• (Completed) Add padding to the left of the logo
• (Completed) Currently the logo is touching the outline of the hamburger button because the padding is missing

[natalia-fitzgerald]

@flacoman91

Desktop review:

• Logo size: In my mock-up the logo is 234px x 50px. In the DSR it is 237 px x 50px. Can you point me to the source logo file that we use in this component? I want to make sure we are using the latest logo file.
• Vertical padding for m-global-eyebrow m-global-eyebrow--horizontal (7.5px) and o-header__content (15px) look correct
• Change links to generic text: "Link"

[flacoman91]

@flacoman91

Desktop review:

• Logo size: In my mock-up the logo is 234px x 50px. In the DSR it is 237 px x 50px. Can you point me to the source logo file that we use in this component? I want to make sure we are using the latest logo file.
• Vertical padding for m-global-eyebrow m-global-eyebrow--horizontal (7.5px) and o-header__content (15px) look correct
• Change links to generic text: "Link"

Should be the one in this folder:

https://github.com/cfpb/design-system-react/tree/main/src/assets/images

[natalia-fitzgerald]

@flacoman91
I updated this comment to include my focused review of the basic header without the navigational links or buttons or the mobile navigation menu. Everything is looking correct but I do want to check to make sure we are using the most updated version of the CFPB logo.

I will provide updated mock-ups for the header with navigation (desktop and mobile) next week.

[natalia-fitzgerald]

@flacoman91
The Basic Header implementation is looking good. Can you confirm what changed about the padding of the US gov banner at mobile & desktop widths?

[flacoman91]

@flacoman91 The Basic Header implementation is looking good. Can you confirm what changed about the padding of the US gov banner at mobile & desktop widths?

The US gov banner wasn't getting the correct padding on the left side at mobile. It was 30px, and should drop down to 15px at <901px.

It's used for the header, so I had to fix it to get the flag to align with the cfpb logo

Here's prod:
https://cfpb.github.io/design-system-react/?path=/story/components-verified-banner-us-gov--us-gov-banner&globals=responsivePreview:all

The fix in this PR:
https://cfpb.github.io/design-system-react/pr-previews/pr-582/?path=/story/components-verified-banner-us-gov--us-gov-banner&globals=responsivePreview:all