Merge pull request #954 from nhsuk/TM-3235-ensure-header-alignment

Ensure that headers are aligned to expected standards
nhsuk · Jun 6, 2024 · d06848f · d06848f
2 parents e2425cf + eb1264a
commit d06848f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
@@ -530,3 +530,9 @@
     display: none;
   }
 }
+
+.nhsuk-header__navigation-list--left-aligned {
+  @include mq($from: desktop) {
+    justify-content: initial;
+  }
+}
diff --git a/packages/components/header/template.njk b/packages/components/header/template.njk
@@ -78,7 +78,7 @@
     </div>{# close nhsuk-header__container #}
     <div class="nhsuk-navigation-container">
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
-        <ul class="nhsuk-header__navigation-list">
+        <ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
           {%- for item in params.primaryLinks %}
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">
@@ -136,7 +136,7 @@
 
     <div class="nhsuk-navigation-container">
       <nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
-        <ul class="nhsuk-header__navigation-list">
+        <ul class="nhsuk-header__navigation-list {%- if params.primaryLinks.length < 4 %} nhsuk-header__navigation-list--left-aligned{% endif %}">
           {%- for item in params.primaryLinks %}
           <li class="nhsuk-header__navigation-item">
             <a class="nhsuk-header__navigation-link"  href="{{item.url}}">