diff --git a/CHANGELOG.md b/CHANGELOG.md index 95109a2075..7eae591079 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,8 +14,9 @@ This was added in [pull request #2164: Enable cookie banner to set link styled a ### Fixes -- [#2132 Improve vertical alignment of phase banner tag on mobile devices](https://github.com/alphagov/govuk-frontend/pull/2132) – thanks to [@matthewmascord](https://github.com/matthewmascord) for contributing this. -- [#2157 Use pointer cursor for 'Menu' button in header](https://github.com/alphagov/govuk-frontend/pull/2157) – thanks to [@MalcolmVonMoJ](https://github.com/MalcolmVonMoJ) for contributing this. +- [#2132: Improve vertical alignment of phase banner tag on mobile devices](https://github.com/alphagov/govuk-frontend/pull/2132) – thanks to [@matthewmascord](https://github.com/matthewmascord) for contributing this. +- [#2157: Use pointer cursor for 'Menu' button in header](https://github.com/alphagov/govuk-frontend/pull/2157) – thanks to [@MalcolmVonMoJ](https://github.com/MalcolmVonMoJ) for contributing this. +- [#2171: Fix padding on GOV.UK logo affecting hover and focus states](https://github.com/alphagov/govuk-frontend/pull/2171) ## 3.11.0 (Feature release) diff --git a/src/govuk/components/header/_index.scss b/src/govuk/components/header/_index.scss index 36dcc42e1a..be8c50c26a 100644 --- a/src/govuk/components/header/_index.scss +++ b/src/govuk/components/header/_index.scss @@ -36,7 +36,15 @@ .govuk-header__logotype { display: inline-block; + + // Add a gap between logo and any product name margin-right: govuk-spacing(1); + + // But remove it if there's nothing after the logo to keep hover and focus + // states neat + &:last-child { + margin-right: 0; + } } .govuk-header__logotype-crown { @@ -57,7 +65,6 @@ .govuk-header__product-name { @include govuk-font($size: 24, $line-height: 1); display: inline-table; - padding-right: govuk-spacing(2); } .govuk-header__link { @@ -92,6 +99,7 @@ @include govuk-font($size: false, $weight: bold); display: inline-block; + margin-right: govuk-spacing(2); font-size: 30px; // We don't have a mixin that produces 30px font size line-height: 1;