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) }}> - +
- - - - {%- if showNav == "false" and showSearch == "false"%} - - {%- if params.transactionalService%} -
- {{ params.transactionalService.name }} -
- - {%- endif %} - -
{# 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%} +
+ {{ params.transactionalService.name }}
- - - {% endif -%} - - {% if showSearch == "true" and showNav == "false" %} - -
- {# close nhsuk-header__container #} - -
- +
- - {% 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