From acc9d129f44c4eb45861a1adbcffd7f9b2d35dfb Mon Sep 17 00:00:00 2001 From: beeps Date: Fri, 30 Aug 2024 13:45:27 +0100 Subject: [PATCH] Fix margins around service navigation mobile toggle Fixes the top margin of the service navigation component's mobile toggle button being too small when not used alongside a service name. --- CHANGELOG.md | 6 ++++++ .../src/govuk/components/service-navigation/_index.scss | 8 +++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a573a1630a..40bed75924 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ For advice on how to use these release notes see [our guidance on staying up to ## Unreleased +### Fixes + +We've made fixes to GOV.UK Frontend in the following pull requests: + +- [#5278: Fix service navigation mobile toggle spacing](https://github.com/alphagov/govuk-frontend/pull/5278) + ## v5.6.0 (Feature release) To install this version with npm, run `npm install govuk-frontend@5.6.0`. You can also find more information about [how to stay up to date](https://frontend.design-system.service.gov.uk/staying-up-to-date/#updating-to-the-latest-version) in our documentation. diff --git a/packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss b/packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss index 0841fa3298..7e02ca894d 100644 --- a/packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss +++ b/packages/govuk-frontend/src/govuk/components/service-navigation/_index.scss @@ -90,7 +90,7 @@ .govuk-service-navigation__toggle { @include govuk-font($size: 19, $weight: bold); display: inline-flex; - margin: 0 0 govuk-spacing(2); + margin: govuk-spacing(2) 0; padding: 0; border: 0; color: $govuk-service-navigation-link-colour; @@ -117,6 +117,12 @@ &[hidden] { display: none; } + + // If we have both a service name and navigation toggle, remove the + // margin-top so that there isn't a bunch of space between them + .govuk-service-navigation__service-name + .govuk-service-navigation__wrapper & { + margin-top: 0; + } } .govuk-service-navigation__list {