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

@@ -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.

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 {