Line up navigation items with header

[frankieroberto]

Description

Whilst working on the 'Logged in header' (nhsuk/nhsuk-service-manual-community-backlog#192) with colleagues, we discussed how the navigation items don't currently align on the left with the NHS logo and the right with the end of the horizontal line, due to padding within the navigation link items.

This becomes more noticeable if additional items (such as account navigation and sign out links) are added to the header.

This could be resolved by adding some negative margin to the navigation container, so that the first and navigation items move into the gutter slightly, but because of the padding the text now lines up.

This does mean they are now out of alignment when focused, but this seems ok?

As a small extra bonus, this also buys 32 extra pixels of width for the navigation list.

This also means that on mobile, when the expanded menu is shown, the items in the expanded menu line up with the main menu.

Current	Proposed

Checklist

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

[anandamaryon1]

The mobile styling still needs a little tweak to make it line up properly.

Wondering about the best way to do this…

Options I can think of:

• removing the left and right padding on the links completely (like the gov service nav) and using the nhsuk-navigation-container's 16px margins
• increasing the padding on the nav links to 16px so they align (but this spaces them out slightly more than currently, 32px vs 24px)
• adding back in a slight margin left to the nav container nhsuk-navigation to line it up (4px)

Any thoughts? @frankieroberto

I'm leaning towards the gov service nav approach now, as it makes it much simpler, no need to add negative margins or tweak anything for responsive.

[frankieroberto]

@anandamaryon1 the first option (removing left and right padding on the links) means a slightly smaller target area, but does seem simpler, and also means the yellow focus state also aligns with the header. Is that ok, do you think?

Would still be 56 pixels high (or 64 pixels high on mobile), and should always be at least 44 pixels wide so long as the labels are around 4 characters or more. The shortest one on NHS.UK ("Health A-Z" would be 80px wide without horizontal padding).

[paulrobertlloyd]

There is another option of course…

Benefits of this approach being:

• Consistent with focus state used for links elsewhere in the design system
• Doesn’t obscure any current section indicators
• Much less wrangling of CSS (just took a quick peak, and there’s a lot that could go away if this were simpler)

[frankieroberto]

I had a quick go at another option here: #1033.

@paulrobertlloyd worth considering that too! It does potentially mean either reducing the height of the target area (which service navigation does) or keeping the taller target area but only having the focus yellow background colour behind the text rather than the full height.

I'm also not totally convinced that having both an underline on the focused item AND the current item is necessary, and it does look a bit odd to me, but maybe it's ok?

[anandamaryon1]

Hmm, playing with the service nav example, I do think our increased target area is helpful, given that the links are within a navigation menu and will be clicked a lot. If we were to go with an option that reduces the visible focus state, I'd hope to maintain the biggest possible click area.

I don't think it's a big issue for the focus state to be misaligned, it only shows fleetingly in usage and the alignment of the default state has a bigger benefit.

Also, on the potential obscuring of a current page highlight, I don't think this is an issue, since on page load the focus state will not be showing, leaving any current page highlight visible (until a user focusses an item).

So, I now vote that we keep this as-is (as currently implemented in this PR).

[frankieroberto]

@anandamaryon1 makes sense and I'd agree that bigger click areas areas are better!

I think I fixed the alignment on mobile on this PR, but definitely worth double-checking and doing some testing on different browsers.

Suggestions on the CSS also welcome - I'm still getting my head around how the CSS works for the header with all the different combinations of screen widths and number of nav items...

[anandamaryon1]

Hi @frankieroberto, doing some testing on this and found this little issue:

The changes in left and right margins have introduced this small gap (4px) on the drop down menu nhsuk-header__drop-down:

vs the current:

[anandamaryon1]

And another one, with the org header.

The logo, search, and nav items do not align with the horizontal divider line:

current:

[anandamaryon1]

Interestingly, the NHS App design system have done this already by stripping off the left and right padding, like #1033:

https://design-system.nhsapp.service.nhs.uk/

Certainly easier to implement…

Did you do this @davidhunter08, any thinking behind it or thoughts on how we should approach it for the main components?

[frankieroberto]

@anandamaryon1 think I’ve fixed both issues now – the CSS is quite complicated though!

[paulrobertlloyd]

Could we have something like this:

$header-navigation-link-padding-block: 12px;
$header-navigation-link-padding-inline: 16px;

Then use these variables elsewhere? That means only needing to change values in one place, and makes it clearer why negative margins are being used elsewhere.

[anandamaryon1]

Closing this one as we opted for approach in #1033