Update header.js to account for gap between navigation items

nhsuk · Oct 22, 2024 · 458b27d · 458b27d
1 parent bbac682
commit 458b27d
Showing 1 changed file with 6 additions and 1 deletion.
diff --git a/packages/components/header/header.js b/packages/components/header/header.js
@@ -54,9 +54,14 @@ class Header {
    *
    */
   calculateBreakpoints() {
+    // Get the width of the gap between each navigation item
+    const navigationListStyles = window.getComputedStyle(this.navigationList)
+    const gapPixels = navigationListStyles.getPropertyValue('gap')
+    const gap = Number(gapPixels.replace('px', ''))
+
     let childrenWidth = 0
     for (let i = 0; i < this.navigationList.children.length; i++) {
-      childrenWidth += this.navigationList.children[i].offsetWidth
+      childrenWidth += this.navigationList.children[i].offsetWidth + gap
       this.breakpoints[i] = childrenWidth
     }
   }