diff --git a/src/nationalarchives/components/header/fixtures.json b/src/nationalarchives/components/header/fixtures.json
index b539665d..2fc2329e 100644
--- a/src/nationalarchives/components/header/fixtures.json
+++ b/src/nationalarchives/components/header/fixtures.json
@@ -40,7 +40,7 @@
"target": "_blank"
}
},
- "html": ""
+ "html": ""
}
]
}
diff --git a/src/nationalarchives/components/header/header.mjs b/src/nationalarchives/components/header/header.mjs
index 014f9155..ea93ac36 100644
--- a/src/nationalarchives/components/header/header.mjs
+++ b/src/nationalarchives/components/header/header.mjs
@@ -2,7 +2,7 @@ export class Header {
constructor($module) {
this.$module = $module;
this.$toggleButton =
- $module && $module.querySelector(".tna-header__navigation-toggle-button");
+ $module && $module.querySelector(".tna-header__navigation-button");
this.$navigation =
$module && $module.querySelector(".tna-header__navigation");
this.$links =
@@ -61,9 +61,7 @@ export class Header {
this.$navigation.setAttribute("aria-hidden", "false");
this.$toggleButton.setAttribute("aria-expanded", "true");
this.$toggleButton.setAttribute("title", "Close menu");
- this.$toggleButton.classList.add(
- "tna-header__navigation-toggle-button--opened",
- );
+ this.$toggleButton.classList.add("tna-header__navigation-button--opened");
for (let i = 0; i < this.$links.length; i++) {
this.$links[i].setAttribute("tabindex", "0");
@@ -77,7 +75,7 @@ export class Header {
this.$toggleButton.setAttribute("aria-expanded", "false");
this.$toggleButton.setAttribute("title", "Open menu");
this.$toggleButton.classList.remove(
- "tna-header__navigation-toggle-button--opened",
+ "tna-header__navigation-button--opened",
);
for (let i = 0; i < this.$links.length; i++) {
diff --git a/src/nationalarchives/components/header/header.scss b/src/nationalarchives/components/header/header.scss
index 573d183e..fdc49441 100644
--- a/src/nationalarchives/components/header/header.scss
+++ b/src/nationalarchives/components/header/header.scss
@@ -33,8 +33,8 @@
}
&__logo {
- padding-top: spacing.space(1.5);
- padding-bottom: spacing.space(1.5);
+ padding-top: spacing.space(1.25);
+ padding-bottom: spacing.space(1.25);
}
&__logo-contents {
@@ -61,8 +61,8 @@
}
.tna-logo {
- width: 6rem;
- height: 6rem;
+ width: 5rem;
+ height: 5rem;
display: inline-block;
@@ -74,13 +74,13 @@
display: inline-block;
- line-height: 2rem;
+ line-height: 1.625rem;
@include typography.heading-font;
@include typography.font-size(20);
text-transform: uppercase;
}
- &__navigation-toggle {
+ &__navigation-button-wrapper {
align-self: center;
display: none;
@@ -118,7 +118,7 @@
}
}
- &__navigation-toggle-button {
+ &__navigation-button {
height: 2rem;
padding: 0;
@@ -285,17 +285,6 @@
@include colour.contrast-on-mobile;
}
- @include media.on-medium {
- .tna-logo {
- width: 5rem;
- height: 5rem;
- }
-
- &__logo-strapline {
- line-height: 1.625rem;
- }
- }
-
@include media.on-mobile {
&__logo {
padding-top: spacing.space(1);
@@ -309,7 +298,7 @@
}
}
- &__navigation-toggle {
+ &__navigation-button-wrapper {
display: block;
&.tna-column {
@@ -412,7 +401,7 @@
&__logo.tna-column,
&__navigation-item-link,
- &__navigation-toggle.tna-column {
+ &__navigation-button-wrapper.tna-column {
padding-right: grid.gutter-width();
}
@@ -428,7 +417,7 @@
}
@include media.on-tiny {
- &__navigation-toggle.tna-column,
+ &__navigation-button-wrapper.tna-column,
&__logo.tna-column {
padding-right: grid.gutter-width-tiny();
}
@@ -447,6 +436,10 @@
line-height: 1;
}
+ &__navigation-button {
+ @include typography.font-size(14);
+ }
+
&__top-navigation-items {
gap: 0.5rem;
}
@@ -465,7 +458,7 @@
}
@include colour.on-forced-colours {
- &__navigation-toggle-button {
+ &__navigation-button {
height: auto;
line-height: 2;
diff --git a/src/nationalarchives/components/header/header.stories.js b/src/nationalarchives/components/header/header.stories.js
index 65672e61..e36ee816 100644
--- a/src/nationalarchives/components/header/header.stories.js
+++ b/src/nationalarchives/components/header/header.stories.js
@@ -88,7 +88,7 @@ Standard.play = async ({ canvasElement }) => {
`.tna-header__navigation-items`,
);
const $navigationToggle = canvasElement.querySelector(
- `.tna-header__navigation-toggle-button`,
+ `.tna-header__navigation-button`,
);
await expect($navigationItems).toBeVisible();
@@ -190,7 +190,7 @@ Mobile.play = async ({ args, canvasElement, step }) => {
canvas.getByText(navigationItem.text),
);
const $navigationToggle = canvasElement.querySelector(
- `.tna-header__navigation-toggle-button`,
+ `.tna-header__navigation-button`,
);
await step("Initial load", async () => {
diff --git a/src/nationalarchives/components/header/template.njk b/src/nationalarchives/components/header/template.njk
index c5a1a952..74e2fbff 100644
--- a/src/nationalarchives/components/header/template.njk
+++ b/src/nationalarchives/components/header/template.njk
@@ -21,8 +21,8 @@
{%- if params.navigation or params.topNavigation %}
-
-