Add text to menu button in global header component

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

src/nationalarchives/components/global-header/global-header.scss

@@ -85,21 +85,21 @@
     width: 2rem;
     height: 0.25rem;
 
-    display: block;
+    display: inline-block;
 
     @include colour.colour-background("font-dark");
 
     &::before,
     &::after {
       content: "";
 
+      width: 2rem;
       height: 0.25rem;
 
       display: block;
 
       position: absolute;
       right: 0;
-      left: 0;
 
       background-color: inherit;
     }
@@ -118,19 +118,26 @@
     padding: 0;
 
     appearance: none;
-
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
 
     position: relative;
 
-    font-size: 0;
+    color: inherit;
 
     background: none;
 
     border: 0 transparent solid;
     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()});