diff --git a/client/src/components/Header/header.css b/client/src/components/Header/header.css
index 5a84343db5..8cc773813d 100644
--- a/client/src/components/Header/header.css
+++ b/client/src/components/Header/header.css
@@ -197,6 +197,11 @@ header {
     top: var(--header-height);
   }
 
+  .opened #top-nav .menu-button {
+    background: white;
+    color: #006400;
+  }
+
   #top-right-nav {
     position: absolute;
     top: -300px;
diff --git a/client/src/components/Header/index.js b/client/src/components/Header/index.js
index 5925643599..1ba56d2b06 100644
--- a/client/src/components/Header/index.js
+++ b/client/src/components/Header/index.js
@@ -68,7 +68,7 @@ class Header extends Component {
     const { disableSettings, showMobileSidenav } = this.props;
     if (this.state.isMenuOpened && showMobileSidenav) {
       return (
-        <header>
+        <header className={this.state.isMenuOpened ? 'opened' : null}>
           <nav id='top-nav'>
             <Link className='home-link' to='/'>
               <NavLogo />