Adjust spacing in header to remove need for a modifier class when it …

…contains search but no navigation
nhsuk · Oct 22, 2024 · fe4d56f · fe4d56f
1 parent bc50201
commit fe4d56f
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 17 deletions.
diff --git a/packages/components/header/_header-transactional.scss b/packages/components/header/_header-transactional.scss
@@ -3,12 +3,9 @@
 */
 
 .nhsuk-header__transactional-service-name {
+  margin-bottom: -(nhsuk-spacing(1));
   padding-left: nhsuk-spacing(3);
-  padding-top: 3px;
-
-  @include mq($until: tablet) {
-    padding-bottom: nhsuk-spacing(3);
-  }
+  padding-top: nhsuk-spacing(1);
 
   @include mq($until: tablet) {
     padding-left: 0;

diff --git a/packages/components/header/_header-white.scss b/packages/components/header/_header-white.scss
@@ -19,6 +19,12 @@
     background-color: $color_nhsuk-blue;
   }
 
+  .nhsuk-navigation {
+    .nhsuk-header__navigation-list {
+      border-top: none;
+    }
+  }
+
   .nhsuk-logo {
     .nhsuk-logo__background {
       fill: $color_nhsuk-blue;
@@ -100,6 +106,7 @@
   .nhsuk-navigation-container {
     background-color: $color_nhsuk-white;
   }
+
   .nhsuk-navigation {
     background-color: $color_nhsuk-white;
 

diff --git a/packages/components/header/_header.scss b/packages/components/header/_header.scss
@@ -26,12 +26,7 @@
   @include govuk-width-container;
   padding: 20px 0;
 
-  @include mq($until: tablet) {
-    padding-bottom: 0;
-  }
-
   @include mq($from: tablet) {
-    border-bottom: 1px solid $color_transparent_nhsuk-white-20;
     display: flex;
     justify-content: space-between;
   }
@@ -113,9 +108,6 @@
 .nhsuk-header__logo--only {
   max-width: 100%;
 
-  @include mq($until: tablet) {
-    padding-bottom: nhsuk-spacing(3);
-  }
   @include mq($from: tablet) {
     .nhsuk-header__link--service {
       align-items: center;
@@ -155,10 +147,6 @@
   }
 }
 
-.nhsuk-header__search-no-nav {
-  padding-bottom: nhsuk-spacing(3);
-}
-
 .nhsuk-header__search-form {
   height: 100%;
   overflow: visible;
@@ -487,6 +475,10 @@
 .nhsuk-navigation-container {
   @include print-hide();
   position: relative;
+
+  @include mq($until: tablet) {
+    margin-top: -20px;
+  }
 }
 
 // ul of hidden nav
@@ -537,6 +529,12 @@
   }
 }
 
+.nhsuk-header__navigation-list {
+  @include mq($from: tablet) {
+    border-top: 1px solid $color_transparent_nhsuk-white-20;
+  }
+}
+
 .nhsuk-header__navigation-list--left-aligned {
   @include mq($from: desktop) {
     justify-content: initial;