diff --git a/client/src/js/views/TopNav.jsx b/client/src/js/views/TopNav.jsx
index cc8ce8a5..cd7ace2f 100644
--- a/client/src/js/views/TopNav.jsx
+++ b/client/src/js/views/TopNav.jsx
@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter, NavLink } from 'react-router-dom';
+import classNames from 'classnames';
 import _ from 'lodash';
 import {
   Navbar,
@@ -79,7 +80,7 @@ class TopNav extends React.Component {
     }
 
     return (
-      <div id="header" className="sticky-top">
+      <div id="header" className={classNames('sticky-top', environmentClass)}>
         <Navbar id="header-main">
           <Container className={'justify-content-start'}>
             <Navbar.Brand href="http://www2.gov.bc.ca/gov/content/home">
diff --git a/client/src/sass/header.scss b/client/src/sass/header.scss
index da8e81e2..8e3af52c 100644
--- a/client/src/sass/header.scss
+++ b/client/src/sass/header.scss
@@ -38,6 +38,21 @@ $nav-active-background-color-uat: lighten($nav-background-color-uat, 10%);
   }
 }
 
+#header {
+  &.env-dev #header-main {
+    background-color: $nav-background-color-dev;
+  }
+
+  &.env-test #header-main {
+    background-color: $nav-background-color-test;
+  }
+
+  &.env-trn #header-main,
+  &.env-uat #header-main {
+    background-color: $nav-background-color-uat;
+  }
+}
+
 #top-nav {
   margin-bottom: 0;
   background-color: $nav-background-color;