diff --git a/web/themes/custom/geofresco/src/global/_base.scss b/web/themes/custom/geofresco/src/global/_base.scss
index 6d1f57e..24f196a 100644
--- a/web/themes/custom/geofresco/src/global/_base.scss
+++ b/web/themes/custom/geofresco/src/global/_base.scss
@@ -20,6 +20,20 @@
   width: -webkit-max-content; /* Chrome */
 }
 
+// Add a gradient across only a portion of the vertical width of the navbar.
+.navbar {
+  background: linear-gradient(
+    $body-background-color,
+    $body-background-color 20px,
+    $light-green 20px,
+    $green 40px,
+    $green 60px,
+    $body-background-color 60px,
+    $body-background-color
+  );
+}
+
+
 // Style the wordmark (logo)
 .navbar-item .wordmark {
   max-height: 3rem; // 4rem
diff --git a/web/themes/custom/geofresco/src/global/global.scss b/web/themes/custom/geofresco/src/global/global.scss
index 8470fb0..174ade4 100644
--- a/web/themes/custom/geofresco/src/global/global.scss
+++ b/web/themes/custom/geofresco/src/global/global.scss
@@ -3,6 +3,8 @@
 // Set brand colors.
 $blue: #4391E0;
 $red: #a70c20;
+$light-green: #65AB1F;
+$green: #478D00;
 
 // Update Bulma's global variables.
 $primary: $blue;
diff --git a/web/themes/custom/geofresco/src/global/overrides.scss b/web/themes/custom/geofresco/src/global/overrides.scss
index 5cf8d46..6e5b6a9 100644
--- a/web/themes/custom/geofresco/src/global/overrides.scss
+++ b/web/themes/custom/geofresco/src/global/overrides.scss
@@ -15,18 +15,6 @@
 }
 */
 
-.navbar {
-  background: linear-gradient(
-    white,
-    white 20px,
-    lightgreen 20px,
-    green 40px,
-    green 60px,
-    white 60px,
-    white
-  );
-}
-
 .footer {
   background-image: url('/themes/custom/geofresco/images/grassland-wark-forest.jpg');
   background-position: center;