From 973cf38234ac0a8b5c2481e1715bcf144b76cb2e Mon Sep 17 00:00:00 2001
From: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
Date: Wed, 13 May 2026 15:26:30 -0700
Subject: [PATCH 1/5] Update Header responsive menu styles.

---
 src/components/Header/responsive-menu.scss | 59 ++++++++++++----------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/components/Header/responsive-menu.scss b/src/components/Header/responsive-menu.scss
index f6a18e2f70..57a3fa22a3 100644
--- a/src/components/Header/responsive-menu.scss
+++ b/src/components/Header/responsive-menu.scss
@@ -1,9 +1,10 @@
 @use '/src/assets/styles/variables.scss' as *;
+@use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 
-$breakpoint: 56.3125em;
+$breakpoint: $bp-med-min;
 $menu-width: 100%;
 $animation-duration: 0.3s;
-$max-width: $breakpoint - 0.0625em;
+$max-width: $bp-sm-max;
 
 .o-header-scope {
   .o-header__content {
@@ -23,6 +24,11 @@ $max-width: $breakpoint - 0.0625em;
         align-items: stretch;
         padding: 0;
         min-height: 60px;
+
+        &.wrapper.wrapper--match-content {
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+        }
       }
 
       @media (min-width: $breakpoint) {
@@ -32,24 +38,26 @@ $max-width: $breakpoint - 0.0625em;
       }
 
       .o-header__logo {
+        display: inline-block;
         min-width: 237px;
 
+        .o-header__logo-img {
+          display: block;
+        }
+
         @media (max-width: $max-width) {
           border-left: 1px solid var(--gray-40);
           padding-left: 15px;
+
           .o-header__logo-img {
             height: 40px;
+            margin-top: 10px;
+            margin-bottom: 10px;
+            vertical-align: middle;
           }
         }
       }
 
-      .o-header__logo-img {
-        height: 34px;
-        margin-top: 10px;
-        margin-bottom: 10px;
-        vertical-align: middle;
-      }
-
       @media (min-width: $breakpoint) {
         .o-header__logo-img {
           height: 50px;
@@ -92,7 +100,7 @@ $max-width: $breakpoint - 0.0625em;
       .nav-items {
         @media (max-width: $max-width) {
           position: absolute;
-          top: 54px;
+          top: 60px;
           left: -$menu-width - 15;
           width: $menu-width;
           background-color: var(--white);
@@ -109,13 +117,11 @@ $max-width: $breakpoint - 0.0625em;
         width: 100%;
 
         &.open {
-          display: flex;
           left: 0;
         }
 
         @media (min-width: $breakpoint) {
           position: static;
-          display: flex;
           flex-direction: row;
           justify-content: flex-end;
           width: auto;
@@ -155,19 +161,23 @@ $max-width: $breakpoint - 0.0625em;
               padding: 0;
             }
 
-            &:hover {
-              position: relative;
+            @media (max-width: $max-width) {
+              &:hover::before,
+              &.nav-item.active::before {
+                position: absolute;
+                top: 0;
+                left: -15px;
+                height: 100%;
+                width: 5px;
+                content: '';
+                display: block;
+              }
+            }
 
+            &:hover {
               @media (max-width: $max-width) {
                 &::before {
-                  position: absolute;
-                  top: 0;
-                  left: -15px;
-                  height: 100%;
-                  width: 5px;
                   background-color: var(--green);
-                  content: '';
-                  display: block;
                 }
                 color: var(--black);
               }
@@ -182,14 +192,7 @@ $max-width: $breakpoint - 0.0625em;
 
               @media (max-width: $max-width) {
                 &::before {
-                  position: absolute;
-                  top: 0;
-                  left: -15px;
-                  height: 100%;
-                  width: 5px;
                   background-color: var(--black);
-                  content: ' ';
-                  display: block;
                 }
               }
 

From 7ab1b61c7815a72d0a8ee793d767ad176ffe63cb Mon Sep 17 00:00:00 2001
From: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
Date: Fri, 15 May 2026 08:52:26 -0700
Subject: [PATCH 2/5] header, remove overrides that are in shared styles now.

---
 src/components/Header/header.stories.tsx   | 7 +++++++
 src/components/Header/responsive-menu.scss | 5 -----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Header/header.stories.tsx b/src/components/Header/header.stories.tsx
index cf9c24e030..231672d23a 100644
--- a/src/components/Header/header.stories.tsx
+++ b/src/components/Header/header.stories.tsx
@@ -23,3 +23,10 @@ export const Default: Story = {
     links: ExampleLinks,
   },
 };
+
+export const Basic: Story = {
+  render: (properties) => <Header {...properties} />,
+  args: {
+    links: [],
+  },
+};
diff --git a/src/components/Header/responsive-menu.scss b/src/components/Header/responsive-menu.scss
index 57a3fa22a3..39ba06b862 100644
--- a/src/components/Header/responsive-menu.scss
+++ b/src/components/Header/responsive-menu.scss
@@ -24,11 +24,6 @@ $max-width: $bp-sm-max;
         align-items: stretch;
         padding: 0;
         min-height: 60px;
-
-        &.wrapper.wrapper--match-content {
-          padding-left: 0 !important;
-          padding-right: 0 !important;
-        }
       }
 
       @media (min-width: $breakpoint) {

From 980d92994be03d65b7e48b0c9e9badd91f9d424f Mon Sep 17 00:00:00 2001
From: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
Date: Fri, 15 May 2026 09:09:16 -0700
Subject: [PATCH 3/5] remove border left when hamburger not present

---
 src/components/Header/responsive-menu.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/responsive-menu.scss b/src/components/Header/responsive-menu.scss
index 39ba06b862..439071b350 100644
--- a/src/components/Header/responsive-menu.scss
+++ b/src/components/Header/responsive-menu.scss
@@ -41,9 +41,7 @@ $max-width: $bp-sm-max;
         }
 
         @media (max-width: $max-width) {
-          border-left: 1px solid var(--gray-40);
           padding-left: 15px;
-
           .o-header__logo-img {
             height: 40px;
             margin-top: 10px;
@@ -53,6 +51,12 @@ $max-width: $bp-sm-max;
         }
       }
 
+      @media (max-width: $max-width) {
+        button.menu-toggle + .o-header__logo {
+          border-left: 1px solid var(--gray-40);
+        }
+      }
+
       @media (min-width: $breakpoint) {
         .o-header__logo-img {
           height: 50px;

From 391d7fd743a5b55bb5bb627cda8d49a4d2fba5c1 Mon Sep 17 00:00:00 2001
From: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
Date: Fri, 15 May 2026 12:28:54 -0700
Subject: [PATCH 4/5] tweaking banner and preview

---
 .storybook/preview-head.html      | 7 ++++---
 src/components/Banner/banner.scss | 7 ++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index e1ae5119b7..88b473fa0b 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -5,9 +5,10 @@
 <!-- Storybook default: `padding: 1rem` on `.sb-show-main.sb-main-padded` (base-preview-head.html).
      - Main canvas: CFPB 15px ($space-sm).
      - Nested "All viewports" (`?responsivePreview=off`): body padding 0; `#storybook-root` uses
-       vertical inset for focus plus small horizontal inset so outlines are not clipped at edges.
-       Full-bleed stories pass `sbNestedCanvasPadding=flush` (via `parameters.sbNestedCanvasPadding`
-       in preview.js) to use zero inset instead. -->
+       vertical inset for focus plus 3px horizontal inset each side (6px narrower than the iframe
+       width when you measure `#storybook-root` children). Full-bleed stories pass
+       `sbNestedCanvasPadding=flush` (via `parameters.sbNestedCanvasPadding` in preview.js) for
+       zero inset instead. -->
 <script>
   (function applyCfpbStorybookCanvasPadding() {
     var style = document.createElement('style');
diff --git a/src/components/Banner/banner.scss b/src/components/Banner/banner.scss
index fbcfdae496..38048922f9 100644
--- a/src/components/Banner/banner.scss
+++ b/src/components/Banner/banner.scss
@@ -54,11 +54,16 @@
       float: left;
     }
 
+    // The inner node uses both `wrapper` and `wrapper--match-content`. DS layout applies
+    // overlapping padding from `.wrapper` (≥ med) and `.wrapper--match-content` (≥ sm);
+    // scope here so the gov banner gutters stay consistent inside Header and standalone.
     .wrapper--match-content {
       padding-left: $space-sm;
+      padding-right: $space-sm;
 
-      @media (width >= 600px) {
+      @include respond-to-min($bp-med-min) {
         padding-left: $space-md;
+        padding-right: $space-md;
       }
     }
 

From ce3db26ce5f581de916815e18ca6d58ce0a35522 Mon Sep 17 00:00:00 2001
From: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
Date: Wed, 20 May 2026 09:06:11 -0700
Subject: [PATCH 5/5] remove bottom border

---
 src/components/Header/header.test.tsx |  6 ------
 src/components/Header/header.tsx      | 10 ++--------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/src/components/Header/header.test.tsx b/src/components/Header/header.test.tsx
index 9da275a4bc..e6113bbf49 100644
--- a/src/components/Header/header.test.tsx
+++ b/src/components/Header/header.test.tsx
@@ -26,10 +26,4 @@ describe('Header', () => {
       'o-header bottom-border',
     );
   });
-
-  it('Can be rendered without bottom border', () => {
-    const { container } = render(<Header withBottomBorder={false} />);
-    expect(container.firstChild.className).toBe('o-header-scope');
-    expect(container.firstChild.firstChild?.className).toBe('o-header');
-  });
 });
diff --git a/src/components/Header/header.tsx b/src/components/Header/header.tsx
index 9d12f64d07..7830fa4121 100644
--- a/src/components/Header/header.tsx
+++ b/src/components/Header/header.tsx
@@ -7,20 +7,14 @@ import './header.scss';
 export interface HeaderProperties {
   links?: JSX.Element[];
   href?: string;
-  withBottomBorder?: boolean;
 }
 
 /**
  * A header helps users identify where they are and provides a quick, organized way to reach the main sections of a website.
  *
  */
-export const Header = ({
-  links,
-  href,
-  withBottomBorder = true,
-}: HeaderProperties): JSX.Element => {
-  const headerClasses = ['o-header'];
-  if (withBottomBorder) headerClasses.push('bottom-border');
+export const Header = ({ links, href }: HeaderProperties): JSX.Element => {
+  const headerClasses = ['o-header', 'bottom-border'];
 
   return (
     <div className='o-header-scope'>