New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site header #97

Open
govuk-design-system opened this Issue Jan 15, 2018 · 16 comments

Comments

@govuk-design-system
Collaborator

govuk-design-system commented Jan 15, 2018

What

Header for GOV.UK, including full-width, departmental, internal and service variants.

Why

Site headers are used on all web pages. There's also a need for consistent headers for departmental and internal services.

Anything else

Related patterns

  • #96 Site footer
@pds2208

This comment has been minimized.

pds2208 commented Jun 25, 2018

There is a weird issue I am seeing with this component. govuk-header__logo is set to 33.33% width and govuk-header__content is set as 66.66%. For some reason this will sometimes cause the service name to move to the next line - looks like browsers will sometimes round both values up. I get the same result in safari, firefox & chrome on osx.

Works fine in the example but not with my implementation. Remove the 66% on govuk-header__content or set it to 66% and it's fine. It may be better to drop the 66.66% to ensure it works under all circumstances?

@igloosi

This comment has been minimized.

Contributor

igloosi commented Jun 25, 2018

Hi, thanks for getting in touch.
In our browser testing we haven't seen that issue and can't replicate it.
Without a live example I'm afraid we won't be able to investigate and I'd be cautious about introducing magic numbers.

@nickcolley

This comment has been minimized.

Contributor

nickcolley commented Jun 25, 2018

@pds2208 in addition to what @igloosi said, if you are able to put together an example that demonstrates the issue with reproducible steps please raise an issue on https://github.com/alphagov/govuk-frontend/issues 😄

Thanks again :)

@pds2208

This comment has been minimized.

pds2208 commented Jun 25, 2018

Ah, found it and can reproduce it. What a weird issue...

Open your test page here in Chrome: https://design-system.service.gov.uk/components/header/with-service-name/index.html

Inspect element.
To the left of: govuk-header__container govuk-width-container on the three dots right click and 'edit as HTML'

Go down to this line:

</div><div class="govuk-header__content">

Move the second opening div <div class=... to a new line and click on the page.
Boom!

Will raise an issue.

@igloosi

This comment has been minimized.

Contributor

igloosi commented Jun 25, 2018

yes, those divs have no space around to for inline-block to respect widths
see https://css-tricks.com/fighting-the-space-between-inline-block-elements/
there are various ways to combat white-space in such instances. we have gone for no space.
negative margin might not work in font size is changed and one last option is to use font: 0 on parent can add font-sizes to children.

@pds2208

This comment has been minimized.

pds2208 commented Jun 25, 2018

The issue here is that a reformat in an html editor will result in a rendering issue. That can't be right.

@dashouse

This comment has been minimized.

dashouse commented Jun 25, 2018

Weirdly yes it does - Elements using inline-block will actually add white space from the HTML editor! I used to deal with this by putting a comment between the lines so it thinks there is no space and you can still put it on a new line.

</div><!--
--><div class="govuk-header__content">
@pds2208

This comment has been minimized.

pds2208 commented Jun 25, 2018

The example here:
https://design-system.service.gov.uk/components/header/ under 'header with service name'
will result in the service name being put on a new line....That's where I copied my code from and subsequently spent ages trying to find out what was wrong...

@nickcolley

This comment has been minimized.

Contributor

nickcolley commented Jun 25, 2018

@pds2208 sorry this is super frustrating, it looks like when we output the HTML examples we 'pretty print' them, which tries to make the markup look tidier. Which has resulted in the issue you're seeing.

If you want to raise an issue on https://github.com/alphagov/govuk-frontend/issues we'll get this sorted, if not I'll do this for you :)

@pds2208

This comment has been minimized.

pds2208 commented Jun 25, 2018

Issue raised and fixed in my code :) Must remember to switch off the auto reformat before commit in IntelliJ....

@hannalaakso

This comment has been minimized.

Member

hannalaakso commented Sep 3, 2018

Capturing alphagov/govuk-frontend#972 here - the extra space in the header on certain tablet breakpoint is something we should explore fixing but there is no straightforward way to do this because:

  • it's possible that we should be recommending services to have the "GOV.UK" text as part of the service name as in the Design System header (linking to https://www.gov.uk/ from a service domain might not be helpful to users)
  • many services have search and various navigation in the header
@lfdebrux

This comment has been minimized.

lfdebrux commented Oct 10, 2018

It's a small thing, but we (Digital Marketplace) just noticed that the header example in Design System is slightly different to the header used for the Design System; the service name ("Design System" in this case) is in a different place.

In the header used, the service name is right next to the GOV.UK badge, and a lighter font. In the example header, the service name is in the middle of the header, and in a bold font.

As there isn't any specific guidance on where the service name should be in the header does mean that the example is not definitive?

@stevenaproctor

This comment has been minimized.

Collaborator

stevenaproctor commented Oct 30, 2018

Many HMRC services do not use the navigation but do have a 'Sign out' link on the right hand side of the header.

Desktop
image

Mobile
image

This would be a good thing to include in the documentation and code, assuming this would help other government departments too.

This could also be part of #95.

@dashouse

This comment has been minimized.

dashouse commented Oct 30, 2018

@lfdebrux Hi Laurence, apologies for the the delay in responding to this.

The header in the Design System is to be used by services. The service name is in bold, centred within the header and has independent links to both the first page of the service and the GOV.UK home page

screen shot 2018-10-30 at 14 08 59

The header used by the Design System is the header designed for GOV.UK products. It's currently in use on GOV.UK Service Manual, GOV.UK Service Toolkit, GOV.UK Notify, GOV.UK Pay, GOV.UK Verify, GOV.UK PaaS and Registers product pages. This has the product name directly next to GOV.UK and they are grouped together as one link that takes you to the product home page.

screen shot 2018-10-30 at 14 09 10

This design was initiated for the Government as a Platform products just under two years ago. It might be that it would be the better option for Digital Marketplace too.

@murfious

This comment has been minimized.

murfious commented Oct 30, 2018

screen shot 2018-10-30 at 14 13 15

It would be great to have some padding between the ‘Menu’ link and the service name on the header seen on small screens. Having them butt up so close I think reduces readability.

@dashouse

This comment has been minimized.

dashouse commented Oct 30, 2018

@murfious

screen shot 2018-10-30 at 14 13 15

It would be great to have some padding between the ‘Menu’ link and the service name on the header seen on small screens. Having them butt up so close I think reduces readability.

I think this might be the design from one of the old codebases. The current version in GOV.UK Frontend / Design System has the Menu button on the same line as GOV.UK, not the service name for this reason

screen shot 2018-10-30 at 14 18 42

@mikeash82 mikeash82 referenced this issue Nov 27, 2018

Closed

HMRC header #4

0 of 5 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment