Updating to scroll past header notifications and keep header sticky (#22539)

* updating to scroll past notification and keep header sticky

* Update components/page-header/Header.tsx

Co-authored-by: Kevin Heis <[email protected]>

Co-authored-by: Kevin Heis <[email protected]>

Author: gracepark

components/page-header/Header.module.scss

@@ -1,3 +1,7 @@
 .breadcrumbs {
   clip-path: inset(-5px -5px -5px 0px);
 }
+
+.header {
+  display: unset;
+}

components/page-header/Header.tsx

@@ -41,13 +41,18 @@ export const Header = () => {
 
   return (
     <div
-      className={`border-bottom color-border-muted no-print position-sticky top-0 z-3  ${
-        scroll ? 'color-shadow-medium' : 'color-shadow-small'
-      } color-bg-default`}
+      className={cx(
+        'border-bottom d-unset color-border-muted no-print z-3 color-bg-default',
+        styles.header
+      )}
     >
       {error !== '404' && <HeaderNotifications />}
-
-      <header className={cx('container-xl px-3 px-md-6 pt-3 pb-3 z-3')}>
+      <header
+        className={cx(
+          'color-bg-default container-xl px-3 px-md-6 pt-3 pb-3 position-sticky top-0 z-3',
+          scroll ? 'color-shadow-medium' : 'color-shadow-small'
+        )}
+      >
         {/* desktop header */}
         <div
           className="d-none d-lg-flex flex-justify-end flex-items-center"