Skip to content

Commit 13cce0e

Browse files
authored
Fix header navigation to be compatible with NHS.UK Frontend 9.4.x (#3485)
`nhsuk-frontend v9.4.x` changed the implementation of the header navigation to fix the behaviour around the overflow navigation menu, and using `padding` instead of `gap` to improve presentation on older devices. This conflicts with the specific changes we’ve made to the container width and current item indicator. (`nhsuk-frontend v10.0.0` will change the header markup considerably, and provide a number of these features saving us from needing to implement them separately.) ### Before ![Before](https://github.com/user-attachments/assets/de9807ae-44da-4546-95bb-32279076ede9) ### After ![After](https://github.com/user-attachments/assets/cb5d76c5-078c-4ce7-8c5a-4201e242e5e3)
2 parents 1fa8e57 + 058c76c commit 13cce0e

File tree

2 files changed

+11
-3
lines changed

2 files changed

+11
-3
lines changed

app/assets/stylesheets/_header.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,19 @@
99
}
1010

1111
.app-header__navigation-item--current {
12-
box-shadow: inset 0 ($nhsuk-focus-width * -1) $nhsuk-border-color;
12+
.nhsuk-header__navigation-link {
13+
border-bottom-color: $nhsuk-border-color;
14+
}
15+
1316
.nhsuk-header__drop-down & {
1417
box-shadow: inset $nhsuk-focus-width 0 $nhsuk-link-color;
18+
19+
.nhsuk-header__navigation-link {
20+
border-bottom-color: transparent;
21+
}
1522
}
1623
}
24+
1725
.app-header__navigation-item--with-count {
1826
.app-count {
1927
@include nhsuk-font(14, $line-height: 1);

app/assets/stylesheets/_overrides.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// `$nhsuk-page-width` isn’t globally editable, so need to apply manually
22
.app-signed-in {
33
.nhsuk-width-container,
4-
.nhsuk-header__navigation-list,
5-
.nhsuk-header__container {
4+
.nhsuk-header__container,
5+
.nhsuk-navigation {
66
max-width: $app-page-width;
77

88
@include govuk-media-query($from: desktop) {

0 commit comments

Comments
 (0)