Left align header navigation items by default

[paulrobertlloyd]

Description

• Left align items in the header navigation
• Provide a new modifier class, .nhsuk-header__navigation-list--justified which restores the previous behaviour.
• Remove the previous modifier class, .nhsuk-header__navigation-list--left-aligned, as this presentation is now the default.
• Increase the space between navigation items from 24px to 32px above the desktop breakpoint, which is a little closer the previous design (items look a bit too closer together above this breakpoint without making this change)
• Fixes Header responsive layout breaks with JS disabled #1093, navigation items not wrapping if JavaScript is not enabled
• Fixes issue with menu button being shown too early or not early enough on smaller screens
• Fixes issue with older browsers (namely Safari 14 device-locked to older iPads) where column-gap is not supported on flex containers. Items are now separated by inline padding on navigation list items

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[paulrobertlloyd]

FYI, visual regression tests are failing because I only added those related to this change; the text is the search input changed in a previous commit, which is causing the failures.

[frankieroberto]

Love it.

[anandamaryon1]

Thanks @paulrobertlloyd this is great, and bonus that it fixes #1093 !

Testing it, I find that items are being hidden behind the 'More' link earlier than they should? (Pretty sure there is enough room to not hide the last item)

Maybe a corresponding change to the JS needed?

This branch:

Header breaking branch (without this chnage):

[paulrobertlloyd]

@anandamaryon1 Good catch! There was a simple fix to this, but the more I played around resizing the browser window, the more related issues I uncovered.

So, this PR now also addresses a number of additional issues relating to navigation items, namely showing the menu button correctly (not too early nor too late), occasionally showing more navigation items on smaller screens, and separates items by using padding instead of column-gap, meaning this part of the header should appear less broken in Safari 14/older iPads.