Hide header nav on print (to fix print layout issues)

[anandamaryon1]

Description

When printing pages that contain a header with navigation links, the print layout depends on the viewport width, leading to layout inconsistency (where the page is being 'zoomed out' to try fit the header, resulting in smaller printed text when printed from a wider browser/desktop).

Example:

page printed at desktop width	page printed at mobile width

And a live nhs.uk example:

page printed at desktop width	page printed at mobile width

I've tested on Chrome, Safari and Firefox and all present the same issue (with slightly different results).

I propose we hide the navigation items when printing.

This PR (hide the nav items):

page printed at desktop width	page printed at mobile width

Checklist

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

[frankieroberto]

Nice! 🖨️

[frankieroberto]

@anandamaryon1 @edwardhorsford thinking about it some more, I wonder if we should also hide everything outside the <main> tag when printing? ie also hide the back link and breadcrumbs?

[edwardhorsford]

@frankieroberto that probably makes sense. Do you think there's any risk of teams putting useful content outside of main? (they shouldn't be!)

[frankieroberto]

@frankieroberto that probably makes sense. Do you think there's any risk of teams putting useful content outside of main? (they shouldn't be!)

Feels low risk?

working out how to hide the breadcrumbs and back links from print is slightly complicated though - I think you'd have to hide everything within <div class="nhsuk-width-container"> and then un-hide everything within <main>?

[edwardhorsford]

I think you could probably do a selector that targets siblings to main. But we'd want to test it carefully - I'd suggest doing as a separate pr for consideration.

[anandamaryon1]

The breadcrumbs already have styles to hide themselves on print but the back link doesn't seem to (I'm not sure why).

It does feel a little risky to hide everything outside main, eg. perhaps an aside containing related sections could be useful content.

I'm thinking to keep this PR focussed on this bug, other print styling can maybe be done later, but I'd like to get this in now if you approve?