nhsuk · anandamaryon1 · Oct 23, 2024 · Aug 20, 2024 · Aug 20, 2024 · Aug 22, 2024
diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
@@ -345,12 +345,12 @@
   color: $color_nhsuk-white;
   display: block;
   font-size: inherit;
-  padding: nhsuk-spacing(3) 12px;
+  padding: nhsuk-spacing(3) 2px;
   text-decoration: underline;
   white-space: nowrap;
 
   @include mq($from: tablet) {
-    padding: 12px nhsuk-spacing(3);
+    padding: 12px 2px;
   }
 
   .nhsuk-icon__chevron-right {
@@ -421,13 +421,17 @@
   z-index: 1;
 
   &.nhsuk-header__navigation-link {
-    padding-right: 30px;
+    padding-right: 23px;
   }
 
   @include mq($from: desktop) {
     display: none;
   }
 
+  .nhsuk-icon__chevron-down {
+    right: -3px;
+  }
+
   &:focus {
     text-decoration: none;
 
@@ -467,11 +471,11 @@
 .nhsuk-header__navigation-list {
   @extend %nhsuk-navigation-list;
   @include govuk-width-container;
-
+  display: flex;
+  gap: nhsuk-spacing(4);
   width: 100%;
 
   @include mq($from: desktop) {
-    display: flex;
     justify-content: space-between;
   }
 

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
     }
   }
@@ -72,7 +77,7 @@ class Header {
    *
    * Closes the mobile menu and updates accessibility state.
    *
-   * Remvoes the margin-bottom from the navigation
+   * Removes the margin-bottom from the navigation
    */
   closeMobileMenu() {
     this.menuIsOpen = false
@@ -115,7 +120,7 @@ class Header {
     this.navigation.style.marginBottom = `${marginBody}px`
     this.mobileMenuToggleButton.setAttribute('aria-expanded', 'true')
 
-    // add event listerer for esc key to close menu
+    // add event listener for esc key to close menu
     document.addEventListener('keydown', this.handleEscapeKey.bind(this))
 
     // add event listener for close icon to close menu
@@ -145,7 +150,7 @@ class Header {
    * If the available space is greater than the current breakpoint,
    * remove the mobile menu toggle button and move the first item in the
    *
-   * Additionaly will close the mobile menu if the window gets resized
+   * Additionally will close the mobile menu if the window gets resized
    * and the menu is open.
    */
 

diff --git a/...op/bitmaps_reference/nhsuk-frontend_Header_default_0_document_0_iPhone_5_SE.png b/...op/bitmaps_reference/nhsuk-frontend_Header_default_0_document_0_iPhone_5_SE.png
diff --git a/...top/bitmaps_reference/nhsuk-frontend_Header_default_0_document_1_iPhone_6-8.png b/...top/bitmaps_reference/nhsuk-frontend_Header_default_0_document_1_iPhone_6-8.png
diff --git a/.../backstop/bitmaps_reference/nhsuk-frontend_Header_default_0_document_2_iPad.png b/.../backstop/bitmaps_reference/nhsuk-frontend_Header_default_0_document_2_iPad.png
diff --git a/...tmaps_reference/nhsuk-frontend_Header_default_0_document_3_Surface_iPad_Pro.png b/...tmaps_reference/nhsuk-frontend_Header_default_0_document_3_Surface_iPad_Pro.png
diff --git a/...aps_reference/nhsuk-frontend_Header_organisational_0_document_0_iPhone_5_SE.png b/...aps_reference/nhsuk-frontend_Header_organisational_0_document_0_iPhone_5_SE.png
diff --git a/...maps_reference/nhsuk-frontend_Header_organisational_0_document_1_iPhone_6-8.png b/...maps_reference/nhsuk-frontend_Header_organisational_0_document_1_iPhone_6-8.png
diff --git a/...op/bitmaps_reference/nhsuk-frontend_Header_organisational_0_document_2_iPad.png b/...op/bitmaps_reference/nhsuk-frontend_Header_organisational_0_document_2_iPad.png
diff --git a/...eference/nhsuk-frontend_Header_organisational_0_document_3_Surface_iPad_Pro.png b/...eference/nhsuk-frontend_Header_organisational_0_document_3_Surface_iPad_Pro.png
diff --git a/...k-frontend_Header_organisational_with_white_header_0_document_0_iPhone_5_SE.png b/...k-frontend_Header_organisational_with_white_header_0_document_0_iPhone_5_SE.png
diff --git a/...uk-frontend_Header_organisational_with_white_header_0_document_1_iPhone_6-8.png b/...uk-frontend_Header_organisational_with_white_header_0_document_1_iPhone_6-8.png
diff --git a/...ce/nhsuk-frontend_Header_organisational_with_white_header_0_document_2_iPad.png b/...ce/nhsuk-frontend_Header_organisational_with_white_header_0_document_2_iPad.png
diff --git a/...ntend_Header_organisational_with_white_header_0_document_3_Surface_iPad_Pro.png b/...ntend_Header_organisational_with_white_header_0_document_3_Surface_iPad_Pro.png
diff --git a/...er_organisational_with_white_header_and_navigation_0_document_0_iPhone_5_SE.png b/...er_organisational_with_white_header_and_navigation_0_document_0_iPhone_5_SE.png
diff --git a/...der_organisational_with_white_header_and_navigation_0_document_1_iPhone_6-8.png b/...der_organisational_with_white_header_and_navigation_0_document_1_iPhone_6-8.png
diff --git a/...nd_Header_organisational_with_white_header_and_navigation_0_document_2_iPad.png b/...nd_Header_organisational_with_white_header_and_navigation_0_document_2_iPad.png
diff --git a/...ganisational_with_white_header_and_navigation_0_document_3_Surface_iPad_Pro.png b/...ganisational_with_white_header_and_navigation_0_document_3_Surface_iPad_Pro.png
diff --git a/...d_Header_with_a_service_name_search_and_navigation_0_document_0_iPhone_5_SE.png b/...d_Header_with_a_service_name_search_and_navigation_0_document_0_iPhone_5_SE.png
diff --git a/...nd_Header_with_a_service_name_search_and_navigation_0_document_1_iPhone_6-8.png b/...nd_Header_with_a_service_name_search_and_navigation_0_document_1_iPhone_6-8.png
diff --git a/...frontend_Header_with_a_service_name_search_and_navigation_0_document_2_iPad.png b/...frontend_Header_with_a_service_name_search_and_navigation_0_document_2_iPad.png
diff --git a/...der_with_a_service_name_search_and_navigation_0_document_3_Surface_iPad_Pro.png b/...der_with_a_service_name_search_and_navigation_0_document_3_Surface_iPad_Pro.png
diff --git a/...ps_reference/nhsuk-frontend_Header_with_navigation_0_document_0_iPhone_5_SE.png b/...ps_reference/nhsuk-frontend_Header_with_navigation_0_document_0_iPhone_5_SE.png
diff --git a/...aps_reference/nhsuk-frontend_Header_with_navigation_0_document_1_iPhone_6-8.png b/...aps_reference/nhsuk-frontend_Header_with_navigation_0_document_1_iPhone_6-8.png
diff --git a/...p/bitmaps_reference/nhsuk-frontend_Header_with_navigation_0_document_2_iPad.png b/...p/bitmaps_reference/nhsuk-frontend_Header_with_navigation_0_document_2_iPad.png
diff --git a/...ference/nhsuk-frontend_Header_with_navigation_0_document_3_Surface_iPad_Pro.png b/...ference/nhsuk-frontend_Header_with_navigation_0_document_3_Surface_iPad_Pro.png
diff --git a/...ference/nhsuk-frontend_Header_with_navigation_open_0_document_0_iPhone_5_SE.png b/...ference/nhsuk-frontend_Header_with_navigation_open_0_document_0_iPhone_5_SE.png
diff --git a/...eference/nhsuk-frontend_Header_with_navigation_open_0_document_1_iPhone_6-8.png b/...eference/nhsuk-frontend_Header_with_navigation_open_0_document_1_iPhone_6-8.png
diff --git a/...maps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_2_iPad.png b/...maps_reference/nhsuk-frontend_Header_with_navigation_open_0_document_2_iPad.png