Adjust the positioning of the header mobile menu button

[owenatgov]

Adjust the positioning of the header mobile menu button so that it sits in the middle of the header bar on mobile rather than at the baseline of the GOV.UK logo.

Fixes #3896

Visual changes

Before

After

Thoughts

I'm wondering if there's a way to flexbox the header so that we can make this positioning dynamic. Will explore this as part of this PR.

[querkmachine]

LGTM.

Unrelated to this, but I noticed when reviewing that there is 50 pixels of horizontal space reserved for the absolutely positioned toggle, but the toggle itself is wider than this (≈54 pixels).

Flagging as it might need to be accounted for if the toggle text is going to be scaled up at some point.

[owenatgov]

@querkmachine Good spot. I'm gonna investigate it a little more but I expect this can be solved by just increasing that padding to govuk-spacing(9) rather than 8. I wonder if there's a way we can make the positioning make more sense and avoid then eed for absolute positioning hacks at all.

[owenatgov]

I'm going to close this in favour of refactoring the header to future proof it against positioning challenges like this one