Orange navbar: change minimizing behavior

js/src/orange-navbar.js

@@ -35,17 +35,10 @@ class OrangeNavbar extends BaseComponent {
   // Static
   static enableMinimizing(el) {
     // The minimized behavior works only if your header has .sticky-top (fixed-top will be sticky without minimizing)
-    const scroll = window.scrollY
-    const headerChildren = [...el.children]
-    const globalHeaderChild = headerChildren.find(element => !element.classList.contains('supra'))
-
-    if (globalHeaderChild) {
-      if (scroll > 0) {
-        // Consider first element not having .supra in array is the first header
-        globalHeaderChild.classList.add('header-minimized')
-      } else {
-        globalHeaderChild.classList.remove('header-minimized')
-      }
+    if (window.scrollY > 0) {
+      el.classList.add('header-minimized')
+    } else {
+      el.classList.remove('header-minimized')
     }
   }
 

js/tests/unit/orange-navbar.spec.js

@@ -122,64 +122,27 @@ describe('OrangeNavbar', () => {
 
   it('should add .header-minimized to the global header non-supra first <nav> when enableMinimizing is called not at the top of the page', () => {
     fixtureEl.innerHTML = [
-      '<header class="sticky-top" style="height: 20000px;">',
-      '  <nav id="notTargeted" class="supra"></nav>',
-      '  <nav id="target"></nav>',
-      '  <nav id="notTargeted2"></nav>',
-      '</header>'
+      '<header class="sticky-top" style="height: 20000px;"></header>'
     ].join('')
 
-    const targetEl = fixtureEl.querySelector('#target')
-    const notTargetedEl = fixtureEl.querySelector('#notTargeted')
-    const notTargeted2El = fixtureEl.querySelector('#notTargeted2')
+    const targetEl = fixtureEl.querySelector('header')
     window.scrollY = 1
 
     OrangeNavbar.enableMinimizing(fixtureEl.querySelector('header.sticky-top'))
 
     expect(targetEl).toHaveClass('header-minimized')
-    expect(notTargetedEl).not.toHaveClass('header-minimized')
-    expect(notTargeted2El).not.toHaveClass('header-minimized')
   })
 
   it('should remove .header-minimized to the global header non-supra first <nav> when enableMinimizing is called at the top of the page', () => {
     fixtureEl.innerHTML = [
-      '<header class="sticky-top" style="height: 20000px;">',
-      '  <nav id="notTargeted" class="supra"></nav>',
-      '  <nav id="target" class="header-minimized"></nav>',
-      '  <nav id="notTargeted2"></nav>',
-      '</header>'
+      '<header class="sticky-top" style="height: 20000px;"></header>'
     ].join('')
 
-    const targetEl = fixtureEl.querySelector('#target')
-    const notTargetedEl = fixtureEl.querySelector('#notTargeted')
-    const notTargeted2El = fixtureEl.querySelector('#notTargeted2')
+    const targetEl = fixtureEl.querySelector('header')
     window.scrollY = 0
 
     OrangeNavbar.enableMinimizing(fixtureEl.querySelector('header.sticky-top'))
 
     expect(targetEl).not.toHaveClass('header-minimized')
-    expect(notTargetedEl).not.toHaveClass('header-minimized')
-    expect(notTargeted2El).not.toHaveClass('header-minimized')
-  })
-
-  it('should not add .header-minimized to the global header non-supra first <nav> when the header only has .supra <nav>', () => {
-    fixtureEl.innerHTML = [
-      '<header class="sticky-top" style="height: 20000px;">',
-      '  <nav id="target0" class="supra"></nav>',
-      '  <nav id="target1" class="supra"></nav>',
-      '  <nav id="target2" class="supra"></nav>',
-      '</header>'
-    ].join('')
-
-    const target0El = fixtureEl.querySelector('#target0')
-    const target1El = fixtureEl.querySelector('#target1')
-    const target2El = fixtureEl.querySelector('#target2')
-    window.scrollY = 1
-
-    OrangeNavbar.enableMinimizing(fixtureEl.querySelector('header.sticky-top'))
-
-    expect(target0El).not.toHaveClass('header-minimized')
-    expect(target1El).not.toHaveClass('header-minimized')
-    expect(target2El).not.toHaveClass('header-minimized')
   })
 })

scss/_orange-navbar.scss

@@ -25,7 +25,8 @@
   }
 }
 
-.header-minimized {
+.header-minimized :first-child:not(.supra),
+.header-minimized .supra + .navbar {
   // scss-docs-start minimized-navbar-css-vars
   @include media-breakpoint-up(md){
     --#{$prefix}navbar-padding-y: 0px; /* stylelint-disable-line length-zero-no-unit */

site/assets/scss/_content.scss

@@ -11,7 +11,7 @@
     --bs-heading-color: var(--bs-emphasis-color);
   }
 
-  > h2:not(:first-child) {
+  > h2 {
     margin-top: 3rem;
   }
 

site/assets/scss/_scrolling.scss

@@ -9,5 +9,17 @@ main {
   [tabindex="0"] {
     scroll-margin-top: 80px;
     scroll-margin-bottom: 100px;
+
+    @include media-breakpoint-up(md) {
+      .header-minimized ~ .bd-gutter & {
+        scroll-margin-top: 8.5rem;
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      .header-minimized ~ .bd-gutter & {
+        scroll-margin-top: 5.5rem;
+      }
+    }
   }
 }

site/content/docs/5.3/migration.md

@@ -89,6 +89,9 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
 - **Orange footer**
   - <span class="badge bg-warning">Warning</span> For accessibility reasons, having a `aria-labelledby` on the collapse element in the accordions used in Orange footer is not necessary and can be removed. Be careful to not remove the corresponding `id` if used for other purposes. Please reflect these modifications into your websites.
 
+- **Orange Navbar**
+  - <span class="badge bg-warning">Warning</span> The minimizing behavior with `.header-minimized` is applied on top of the `<header>` instead of one of his child directly.
+
 - **Progress bars**
   - The markup for [progress bars]({{< docsref "/components/progress" >}}) has been updated in v5.3.0. Due to the placement of `role` and various `aria-` attributes on the inner `.progress-bar` element, **some screen readers were not announcing zero value progress bars**. Now, `role="progressbar"` and the relevant `aria-*` attributes are on the outer `.progress` element, leaving the `.progress-bar` purely for the visual presentation of the bar and optional label.