diff --git a/CHANGELOG.md b/CHANGELOG.md
index f8fd2e5a1..619a7eb30 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
# NHS.UK frontend Changelog
+## Unreleased
+
+:wrench: **Fixes**
+
+- Update header styles so that `.nhsuk-header__search-no-nav` class is no longer needed when header contains a search field but no navigation ([PR 1046](https://github.com/nhsuk/nhsuk-frontend/pull/1046))
+
## 9.0.1 - 9 October 2024
:wrench: **Fixes**
diff --git a/packages/components/header/_header-transactional.scss b/packages/components/header/_header-transactional.scss
index abea22684..bfce5ab28 100644
--- a/packages/components/header/_header-transactional.scss
+++ b/packages/components/header/_header-transactional.scss
@@ -3,12 +3,9 @@
*/
.nhsuk-header__transactional-service-name {
+ margin-bottom: -(nhsuk-spacing(1));
padding-left: nhsuk-spacing(3);
- padding-top: 3px;
-
- @include mq($until: tablet) {
- padding-bottom: nhsuk-spacing(3);
- }
+ padding-top: 2px;
@include mq($until: tablet) {
padding-left: 0;
diff --git a/packages/components/header/_header-white.scss b/packages/components/header/_header-white.scss
index a59a610c4..6ff7fe321 100644
--- a/packages/components/header/_header-white.scss
+++ b/packages/components/header/_header-white.scss
@@ -19,6 +19,12 @@
background-color: $color_nhsuk-blue;
}
+ .nhsuk-navigation {
+ .nhsuk-header__navigation-list {
+ border-top: none;
+ }
+ }
+
.nhsuk-logo {
.nhsuk-logo__background {
fill: $color_nhsuk-blue;
@@ -100,6 +106,7 @@
.nhsuk-navigation-container {
background-color: $color_nhsuk-white;
}
+
.nhsuk-navigation {
background-color: $color_nhsuk-white;
diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
index 36d0e7a55..37f0b4600 100644
--- a/packages/components/header/_header.scss
+++ b/packages/components/header/_header.scss
@@ -26,12 +26,7 @@
@include govuk-width-container;
padding: 20px 0;
- @include mq($until: tablet) {
- padding-bottom: 0;
- }
-
@include mq($from: tablet) {
- border-bottom: 1px solid $color_transparent_nhsuk-white-20;
display: flex;
justify-content: space-between;
}
@@ -113,9 +108,6 @@
.nhsuk-header__logo--only {
max-width: 100%;
- @include mq($until: tablet) {
- padding-bottom: nhsuk-spacing(3);
- }
@include mq($from: tablet) {
.nhsuk-header__link--service {
align-items: center;
@@ -155,10 +147,6 @@
}
}
-.nhsuk-header__search-no-nav {
- padding-bottom: nhsuk-spacing(3);
-}
-
.nhsuk-header__search-form {
height: 100%;
overflow: visible;
@@ -487,6 +475,10 @@
.nhsuk-navigation-container {
@include print-hide();
position: relative;
+
+ @include mq($until: tablet) {
+ margin-top: -20px;
+ }
}
// ul of hidden nav
@@ -537,6 +529,12 @@
}
}
+.nhsuk-header__navigation-list {
+ @include mq($from: tablet) {
+ border-top: 1px solid $color_transparent_nhsuk-white-20;
+ }
+}
+
.nhsuk-header__navigation-list--left-aligned {
@include mq($from: desktop) {
justify-content: initial;
diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
index 5419e7627..9839bccbf 100644
--- a/packages/components/header/template.njk
+++ b/packages/components/header/template.njk
@@ -16,9 +16,9 @@
{%- if params.organisation and params.organisation.name %} nhsuk-header--organisation{% endif %}
{%- if params.classes %} {{ params.classes }}{% endif %}" role="banner"
{{- nhsukAttributes(params.attributes) }}>
-
+
{# close nhsuk-header__container #}
-
- {% endif -%}
-
- {% if showNav == "true" and params.primaryLinks and showSearch == "true" %}
-
-
-
- {# close nhsuk-header__container #}
-
-
+{%- if showNav == "false" and showSearch == "false"%}
+ {%- if params.transactionalService%}
+
-
-
- {% endif -%}
-
- {% if showSearch == "true" and showNav == "false" %}
-
-
-
- {% endif -%}
-
+{% endif -%}
+
{# close nhsuk-header__container #}
+
+{% if showNav == "true" and params.primaryLinks %}
+
+
+
+{% endif -%}
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_2_iPad.png
index f1491738d..89802b24c 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_2_iPad.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_2_iPad.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_3_Surface_iPad_Pro.png
index 8cb862ce8..e6a730054 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_0_document_3_Surface_iPad_Pro.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_2_iPad.png
index 675283fab..a39733e2f 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_2_iPad.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_2_iPad.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_3_Surface_iPad_Pro.png
index b666cf6fd..0fc440381 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_organisational_with_white_header_and_navigation_0_document_3_Surface_iPad_Pro.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_transactional_with_service_name_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_transactional_with_service_name_0_document_2_iPad.png
index 0df4b88c3..786607e4e 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_transactional_with_service_name_0_document_2_iPad.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_transactional_with_service_name_0_document_2_iPad.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_transactional_with_service_name_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_transactional_with_service_name_0_document_3_Surface_iPad_Pro.png
index bfb88ba93..635688929 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_transactional_with_service_name_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_transactional_with_service_name_0_document_3_Surface_iPad_Pro.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_0_iPhone_5_SE.png
index f0e01a0d0..dca720deb 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_0_iPhone_5_SE.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_0_iPhone_5_SE.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_1_iPhone_6-8.png
index 071755153..5ef226f45 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_1_iPhone_6-8.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_1_iPhone_6-8.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_3_Surface_iPad_Pro.png
index c4361de78..bc9740d29 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_a_service_name_0_document_3_Surface_iPad_Pro.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_0_iPhone_5_SE.png
index 9a5bc7f36..307a5f6bd 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_0_iPhone_5_SE.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_0_iPhone_5_SE.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_1_iPhone_6-8.png
index 5d1ec01c9..5eacc911e 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_1_iPhone_6-8.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_1_iPhone_6-8.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_3_Surface_iPad_Pro.png
index c0b42811a..92b9f2c6f 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_logo_only_0_document_3_Surface_iPad_Pro.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_0_iPhone_5_SE.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_0_iPhone_5_SE.png
index d08db65f6..b722b454c 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_0_iPhone_5_SE.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_0_iPhone_5_SE.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_1_iPhone_6-8.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_1_iPhone_6-8.png
index 582fdc905..a13032848 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_1_iPhone_6-8.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_1_iPhone_6-8.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_2_iPad.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_2_iPad.png
index 6824ffb97..91a784393 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_2_iPad.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_2_iPad.png differ
diff --git a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_3_Surface_iPad_Pro.png b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_3_Surface_iPad_Pro.png
index 9d3be2a55..3069f4bbb 100644
Binary files a/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_3_Surface_iPad_Pro.png and b/tests/backstop/bitmaps_reference/nhsuk-frontend_Header_with_search_0_document_3_Surface_iPad_Pro.png differ