Header component styling issues

[anandamaryon-gov]

Details of a few styling issues I've noticed whilst working with the header component (https://design.homeoffice.gov.uk/components?name=Header). I am grouping them because they are mostly very minor (happy to split them up if more helpful).

1. Navigation tabs move around when the active tab changes, due to the bold styling. This is visually distracting but also means that there is the possibility of the layout shifting on navigation, due to the maximum width being hit, and a tab reflowing to the next line.
   Suggested fix: remove the bold styling on active.

2. The black underline which highlights when a tab is the current active tab, and shows on hover/focus states, is not a clickable part of the nav link. This can cause users to click on what they think is the tab, but their click will not initiate the expected change in navigation.
   Suggested fix: Move the active styling's border bottom from the list tag and on to the anchor tag.

3. Account and sign out links (continued within the hods-header__account-menu element) are not right-aligned. This makes the header appear not centred and makes the account menu items hug closer to the service name.
   Suggested fix: remove the margin-right: auto; from this element.

4. The header isn't very responsive, resulting in there being insufficient space between the service name and account menu items, which are both clickable and so would benefit from having space around them, to reduce erroneously selecting the wrong option. Spacing would also help readability.
   Suggested quick fix: Add some margin around the service name.

FYI for anyone who picks this up, other issues related to the header:

• Header: Apply active styling when in section #311
• Header - customisable #229
• Components should not depend on configuration objects #232

[anandamaryon-gov]

I don't seem to have permission to edit Labels, so if anyone else can, please feel free to change these.

[daniel-ac-martin]

Thanks @anandamaryon-gov.

I'm going to move this to discussions. Once we know what we are going to do, we should break this down into smaller issues to be addressed.

[tomyems]

No bold for active state of link. The styling has also moved to the link rather than the button (though you can't see that on the image)

319 pixel width

600 pixel width

1000 pixel width

1314 pixel width

The styling that produced these images is Header.txt.