Header: Add the ability to replace the logo with an NHS organisation logo

[damonjagger]

Originally posted in #169

Some of the NHS services I work on use a different organisational logo.

It would be useful if we could extend the logo part of the header for those services.

I haven't done any testing to see what the impact of doing this would be in the current iteration of the header component. But it's something I'd like to see in the wagtail nhsuk frontend.

[damonjagger]

Interested to know whether this is something that the standards piece of work is trying to avoid with a singular logo and service name.

[danfascia]

Hi there, we are working through a similar issue at The Yorkshire Imaging Collaborative. We have our own branding acting as an umbrella group for radiology across 9 Trusts.

Here are my considerations so far...

[tblacker7]

I had to tackle this as we are making a template for a number of organisation with white logos and they looked horrendous on the blue header. The solution I created was to add this to the header css component:

 .nhsuk-header__inverted {
    background: $color_nhsuk-white;
    color: $color_nhsuk-black;
}

It does then require a few over-written styles (for example to help delineate the search box you can modify border colour).

In the markup, I had to add this as an additional div to ensure the full width colour was retained on both logo element and on the menu. So the markup has the new element:

<header class="nhsuk-header nhsuk-header--transactional" role="banner">
        <div class="nhsuk-header nhsuk-header__inverted">
        <div class="nhsuk-width-container nhsuk-header__container">
            <div class="nhsuk-header__logo">


                    <a class="nhsuk-header__link" href="/" aria-label="NHS homepage">
                        </a><a href="http://localhost/" class="custom-logo-link" rel="home"><img /></a>

and the new div nhsuk-header nhsuk-header__inverted is then closed before the menu div is opened.

This seemed to be a relatively easy and logical fix. Hope it helps.

[nervewax]

+1 here for organisational logos in both SVG, image and SVG/text formats.

I'll see if I can dig out some work I did on this, I know a few of our clients would appreciate it.

[danfascia]

We are going through the same considerations. I don't think it looks to bad white on blue... but I prefer colour on white since the rest of the site is a pretty strict palette anyway.

[chrimesdev]

@danfascia @damonjagger are you able to share any code for your solutions? Going to try pull this work together

[chrimesdev]

Original comment by @danfascia : #454 (comment)

A logo of NHS Trusts and nearly all Partnerships depend on a default of a white background for their identity. This mostly stems from the use of print media I think.

Whilst I like the NHS blue header, I associate it directly with NHS England and associated bodies whereas I associate Trusts with blue on white.

Trusts often have other brand assets which they need to include on a website, again nearly always based off a white background.

I think a header variant to accept this inevitable truth would be a good idea for the toolkit (more akin to that previously available in this older toolkit https://nhsuk.github.io/frontend-library/)

[chrimesdev]

@nervewax would you be able to share that solution we discussed generating SVG icon with the name of the organisation?

[chrimesdev]

Hi @nervewax, @tblacker7, @danfascia, @damonjagger

We've done some work with organisational headers and custom logos, it currently on the branch org-header (PR #514). Theres just some final accessibility testing then we are looking at releasing it as an 'Experimental' component. We need some more testing from organisations that need this header (as org headers isn't something we have a need for on our website), is this something you could help out with?

[chrimesdev]

@helenspires @ermlikeyeah is an organisational header something that would be beneficial to NHSBSA/NHS Jobs? You can find more information and examples on #514 org-header branch

[damonjagger]

This is some great work, Kudos.

[damonjagger]

I've managed to do some testing on this component, seems to be working quite well so far.

I've left some comments on the PR with a couple of things I noticed.

[chrimesdev]

This was released in 3.0.0

You can find the guidance on the NHS digital service manual