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

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):