Header navigation margins option 2 (#1033)

* line up navigation items with header

* Restore position relative, needed for absolute positioning of the drop-down nav

* Fix mobile layout

* Use margin instead of padding to line up navigation

* Remove margin-right on last item

* add 2px padding to nav items, change padding right to flex gap

* Only apply govuk-width-container to navigation list, not navigation container

* remove increased minimum spacing for navigation items on desktop

* Fix typos in header.js

* Update header.js to account for gap between navigation items

* reduce padding on menu button chevron to fit new styling

* update backstop refs

---------

Co-authored-by: anandamaryon1 <anandamaryon@gmail.com>
Co-authored-by: Paul Robert Lloyd <me+git@paulrobertlloyd.com>
Co-authored-by: Ananda Maryon <159916913+anandamaryon1@users.noreply.github.com>

CHANGELOG.md

@@ -5,6 +5,7 @@
 :wrench: **Fixes**
 
 - Update header styles so that `.nhsuk-header__search-no-nav` class is no longer needed when header contains a search field but no navigation ([PR 1046](https://github.com/nhsuk/nhsuk-frontend/pull/1046))
+- Update navigation list item padding to vertically align navigation items with width container ([PR 1033](https://github.com/nhsuk/nhsuk-frontend/pull/1033))
 
 ## 9.0.1 - 9 October 2024
 

packages/components/header/_header.scss

@@ -333,12 +333,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 {
@@ -409,13 +409,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;
 
@@ -455,11 +459,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;
   }
 

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.
    */