From 2e6c00d245dd33337ed88df41b1aff1a586e5b89 Mon Sep 17 00:00:00 2001
From: AshGDS <8880610+AshGDS@users.noreply.github.com>
Date: Tue, 17 Sep 2024 15:24:15 +0100
Subject: [PATCH] Fix homepage super navigation buttons when text scale is
 increased

---
 CHANGELOG.md                                                | 1 +
 .../components/_layout-super-navigation-header.scss         | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b20a4ab29..87aa35c6bb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 * Add GA4 redaction to GWF and GB EORI numbers ([PR #4227](https://github.com/alphagov/govuk_publishing_components/pull/4227))
 * Add files for secondary navigation: ([PR #4229](https://github.com/alphagov/govuk_publishing_components/pull/4229))
 * New class to collapse columns for print ([PR #4224](https://github.com/alphagov/govuk_publishing_components/pull/4224))
+* Fix homepage super navigation buttons when text scale is increased ([PR #4232](https://github.com/alphagov/govuk_publishing_components/pull/4232))
 
 ## 43.1.1
 
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
index fc0fd621bd..b23f507469 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
@@ -290,6 +290,8 @@ $after-button-padding-left: govuk-spacing(4);
 // after it has been toggled closed if the blue background has
 // been enabled
 .gem-c-layout-super-navigation-header__navigation-top-toggle-button.gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background {
+  background-color: $govuk-brand-colour;
+
   &:focus:not(:focus-visible) {
     &::after {
       background: none;
@@ -606,6 +608,10 @@ $after-button-padding-left: govuk-spacing(4);
 // Styles for search toggle button.
 .gem-c-layout-super-navigation-header__search-toggle-button {
   background: none;
+
+  &.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+    background: $govuk-brand-colour;
+  }
   border: 0;
   color: govuk-colour("white");
   cursor: pointer;