diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index 3c569cd67d54c5ff2536c4c845ef0cb44997a794..57b082e7227fc81650db891d4a421166285cf92d 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -3215,10 +3215,20 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
 }
 
 .navbar-background {
-  background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
   min-height: 63px;
 }
 
+@media (min-width: 1200px) {
+
+.navbar-background {
+    background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%)
+}
+    .navbar-background:hover {
+      background: black;
+      transition: all 400ms ease-out;
+    }
+  }
+
 .main-menu-grid {
   max-width: none;
   grid-template-areas:
@@ -3601,12 +3611,6 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
   height: 100%;
 }
 
-.h-fit{
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-}
-
 .h-32{
   height: 8rem;
 }
@@ -3627,6 +3631,12 @@ div.twitter-carousel .slick-arrow.slick-disabled:before, div.twitter-carousel .s
   height: 3rem;
 }
 
+.h-fit{
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
 .max-h-20{
   max-height: 5rem;
 }
@@ -4515,11 +4525,6 @@ a.icon-link:hover span{
   width: 100%;
 }
 
-.hover\:bg-black:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-}
-
 .hover\:no-underline:hover{
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
@@ -4799,14 +4804,9 @@ a.icon-link:hover span{
     margin: 0px;
   }
 
-  .xl\:my-2{
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  .xl\:my-3{
-    margin-top: 0.75rem;
-    margin-bottom: 0.75rem;
+  .xl\:my-4{
+    margin-top: 1rem;
+    margin-bottom: 1rem;
   }
 
   .xl\:mr-2{
@@ -5068,10 +5068,6 @@ a.icon-link:hover span{
     --tw-shadow-colored: 0 0 #0000;
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
-
-  .xl\:duration-200{
-    transition-duration: 200ms;
-  }
 }
 
 @media (min-width: 1366px){
diff --git a/main/styleguide/source/_patterns/organisms/header.mustache b/main/styleguide/source/_patterns/organisms/header.mustache
index 883b18c897448ba8c8a6e90950f9921f91675384..e839225f27fa4454fcff3c8aceee0447a67614f6 100644
--- a/main/styleguide/source/_patterns/organisms/header.mustache
+++ b/main/styleguide/source/_patterns/organisms/header.mustache
@@ -1,8 +1,8 @@
 <!-- Navbar -->
 <nav
-  class="navbar-background bg-black xl:duration-200 relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full hover:bg-black">
+  class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full">
   <!-- Logo -->
-  <a href="" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-2 xl:my-3">
+  <a href="" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-4">
     <img src="../../images/logo-full-black.svg" alt="">
   </a>
   <!-- Flex container -->
diff --git a/main/styleguide/source/css/organisms/navbar.pcss b/main/styleguide/source/css/organisms/navbar.pcss
index cf28049578e99d7201bf1fa5192884c9a1f0dbd7..c84f0e268984505fafa9805a6963f511bd24131e 100644
--- a/main/styleguide/source/css/organisms/navbar.pcss
+++ b/main/styleguide/source/css/organisms/navbar.pcss
@@ -37,8 +37,14 @@
 }
 
 .navbar-background {
-  background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
   min-height: 63px;
+  @screen xl {
+    background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
+    &:hover {
+      background: black;
+      transition: all 400ms ease-out;
+    }
+  }
 }
 .main-menu-grid {
   max-width: none;
diff --git a/main/templates/main/includes/layout/header.html b/main/templates/main/includes/layout/header.html
index a1848e7c3cc64ad384cb4f704bd8a3baf7964607..6031998d9efef94de94146c79fa5043c0c347279 100644
--- a/main/templates/main/includes/layout/header.html
+++ b/main/templates/main/includes/layout/header.html
@@ -1,9 +1,9 @@
 {% load static wagtailcore_tags %}
 
 <!-- Navbar -->
-<nav class="navbar-background bg-black xl:duration-200 relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full hover:bg-black">
+<nav class="navbar-background bg-black relative xl:bg-transparent xl:static xl:absolute z-50 xl:z-50 xl:w-full">
   <!-- Logo -->
-  <a href="/" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-2 xl:my-3">
+  <a href="/" class="menu-flag flex justify-center z-50 flag bg-white p-1 main-menu__logo xl:my-4">
     <img src="{% static "shared/img/logo-full-black.svg" %}" alt="">
   </a>
   <!-- Flex container -->