diff --git a/src/stories/Blocks/header/Header.tsx b/src/stories/Blocks/header/Header.tsx
index 1514774ef..c1b2d31d4 100644
--- a/src/stories/Blocks/header/Header.tsx
+++ b/src/stories/Blocks/header/Header.tsx
@@ -54,21 +54,21 @@ export const Header = (props: HeaderProps) => {
           >
             <div>
               <div className="header__menu-navigation-mobile">
-                <Pagefold
-                  isInheriting={false}
-                  isAContainer={false}
-                  size="small"
+                <button
+                  id="header-sidebar-nav__toggle"
                   className="header__menu-navigation-button header__button"
-                  compProps={{
-                    id: "header-sidebar-nav__toggle",
-                    "aria-controls": "sidebarNav",
-                    "aria-expanded": "false",
-                    role: "button",
-                    tabIndex: 0,
-                  }}
+                  aria-controls="sidebarNav"
+                  aria-expanded="false"
                 >
-                  <MenuIcon />
-                </Pagefold>
+                  <Pagefold
+                    isInheriting={false}
+                    isAContainer={false}
+                    size="small"
+                    className="header__menu-navigation-pagefold"
+                  >
+                    <MenuIcon />
+                  </Pagefold>
+                </button>
                 <div className="header__menu-navigation-logo">
                   <Logo
                     hasImage
diff --git a/src/stories/Blocks/header/header.scss b/src/stories/Blocks/header/header.scss
index 981b2a9e0..bf26fdb48 100644
--- a/src/stories/Blocks/header/header.scss
+++ b/src/stories/Blocks/header/header.scss
@@ -55,6 +55,13 @@
   align-items: center;
   border-right: 1px solid $color__global-tertiary-1;
 }
+.header__menu-navigation-pagefold {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
 .header__menu-profile,
 .header__menu-bookmarked {
diff --git a/src/stories/Library/header-sidebar-nav/header-sidebar-nav.scss b/src/stories/Library/header-sidebar-nav/header-sidebar-nav.scss
index 027e7361d..7a162c98e 100644
--- a/src/stories/Library/header-sidebar-nav/header-sidebar-nav.scss
+++ b/src/stories/Library/header-sidebar-nav/header-sidebar-nav.scss
@@ -16,10 +16,6 @@ $_menu_animation_delay: 0.2s;
   transform: translateX(-100%);
   transition: transform $_transition_speed $_bezier_transition;
 
-  @include media-query__small {
-    display: none;
-  }
-
   ul.header__menu-navigation {
     padding: 0;
     display: flex;
@@ -46,6 +42,8 @@ $_menu_animation_delay: 0.2s;
     text-decoration: none;
     position: relative;
     display: inline-block;
+    white-space: normal;
+    word-break: break-word;
   }
 
   .header__menu-navigation-link::after {
@@ -115,6 +113,10 @@ $_menu_animation_delay: 0.2s;
     --sidebar-padding: #{$s-lg};
   }
 
+  .header-sidebar-nav {
+    display: none;
+  }
+
   .header-sidebar-nav__menu-wrapper {
     max-width: 375px;
     grid-gap: $s-lg;
@@ -124,3 +126,11 @@ $_menu_animation_delay: 0.2s;
     padding-top: 120px;
   }
 }
+
+// This reflects the current override of the burger menu state, which is
+// controlled by the .has-burger-menu class on the html element.
+// This takes effect when the desktop-menu has too many items, and gets
+// changed to a burger menu.
+.has-burger-menu .header-sidebar-nav {
+  display: block;
+}