From 55fdbeeae37f94dc2e646f5f379024072dd7b7fd Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 20 Aug 2024 22:53:05 +0100 Subject: [PATCH 1/4] line up navigation items with header --- packages/components/header/_header.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index 716e5c603..f21d14077 100644 --- a/packages/components/header/_header.scss +++ b/packages/components/header/_header.scss @@ -449,6 +449,8 @@ } .nhsuk-navigation { + margin-left: -$nhsuk-gutter-half; + margin-right: -$nhsuk-gutter-half; display: flex; @include mq($until: tablet) { @@ -466,8 +468,6 @@ // ul of visible nav .nhsuk-header__navigation-list { @extend %nhsuk-navigation-list; - @include govuk-width-container; - width: 100%; @include mq($from: desktop) { @@ -485,7 +485,7 @@ } .nhsuk-navigation-container { - position: relative; + @include govuk-width-container; } // ul of hidden nav From caee8b985e79edf255fd2a060ff0a04b9077c5ce Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Tue, 20 Aug 2024 23:17:10 +0100 Subject: [PATCH 2/4] Restore position relative Needed for absolute positioning of the drop-down nav --- packages/components/header/_header.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index f21d14077..00b54d209 100644 --- a/packages/components/header/_header.scss +++ b/packages/components/header/_header.scss @@ -486,6 +486,7 @@ .nhsuk-navigation-container { @include govuk-width-container; + position: relative; } // ul of hidden nav From 529a772c47156b1e2121f49a7a895ca4bb793a25 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Fri, 27 Sep 2024 09:37:07 +0100 Subject: [PATCH 3/4] Fix mobile layout --- packages/components/header/_header.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index ac94a91c5..d9f7a36fd 100644 --- a/packages/components/header/_header.scss +++ b/packages/components/header/_header.scss @@ -449,10 +449,18 @@ } .nhsuk-navigation { - margin-left: -$nhsuk-gutter-half; - margin-right: -$nhsuk-gutter-half; + /* These negative margins are the same as the padding on the navigation items, + and used to align the text of the first and last item with the rest of the header. */ + margin-left: -12px; + margin-right: -12px; display: flex; + @include mq($from: tablet) { + /* These padding is slightly more from tablet width upwards. */ + margin-left: -16px; + margin-right: -16px; + } + @include mq($until: tablet) { position: relative; z-index: 10; From 8b2b730533c2a74db6321c9b33e3a2d8bf9a7570 Mon Sep 17 00:00:00 2001 From: Frankie Roberto Date: Thu, 3 Oct 2024 16:59:21 +0100 Subject: [PATCH 4/4] Fix prettier linting --- packages/components/header/_header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss index d9f7a36fd..850b46f5c 100644 --- a/packages/components/header/_header.scss +++ b/packages/components/header/_header.scss @@ -456,7 +456,7 @@ display: flex; @include mq($from: tablet) { - /* These padding is slightly more from tablet width upwards. */ + /* These padding is slightly more from tablet width upwards. */ margin-left: -16px; margin-right: -16px; }