diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f151b8f..7ab911c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Removed the tabindex on open accordion items - Theme selector icons in footer changed to SVGs - Updated style of gallery next and previous buttons -- Header menu button now has text +- Header and global header menu buttons now have text +- Reduced size of logo in header component +- Header markup changed to align more closely with global header ### Deprecated ### Removed diff --git a/src/nationalarchives/components/global-header/global-header.scss b/src/nationalarchives/components/global-header/global-header.scss index 63a3832f..52368c62 100644 --- a/src/nationalarchives/components/global-header/global-header.scss +++ b/src/nationalarchives/components/global-header/global-header.scss @@ -85,7 +85,7 @@ width: 2rem; height: 0.25rem; - display: block; + display: inline-block; @include colour.colour-background("font-dark"); @@ -93,13 +93,13 @@ &::after { content: ""; + width: 2rem; height: 0.25rem; display: block; position: absolute; right: 0; - left: 0; background-color: inherit; } @@ -118,12 +118,13 @@ padding: 0; appearance: none; - - display: block; + display: flex; + align-items: center; + gap: 0.75rem; position: relative; - font-size: 0; + color: inherit; background: none; @@ -131,6 +132,12 @@ border-width: 0.25rem 0; cursor: pointer; + @include typography.main-font-weight-bold; + @include typography.font-size(16); + + &:hover { + @include typography.interacted-text-decoration; + } &--opened { .tna-global-header__hamburger { @@ -388,6 +395,10 @@ line-height: 1; } + &__navigation-button { + @include typography.font-size(14); + } + &__navigation { width: calc(100% + #{grid.gutter-width-tiny-double()});