diff --git a/src/components/HamburgerMenu.js b/src/components/HamburgerMenu.js
index 476b0f8fe..ed278f7f1 100644
--- a/src/components/HamburgerMenu.js
+++ b/src/components/HamburgerMenu.js
@@ -9,7 +9,7 @@ const HamburgerMenu = ({ toggle, open }) => (
     aria-expanded={open}
     aria-label="Mobile Menu"
     type="button"
-    className={cx('HamburgerMenu', { HamburgerMenu__open: open })}
+    className={cx('HamburgerMenu', { 'is-open': open })}
     onClick={() => toggle()}
   >
     <div />
diff --git a/src/components/HamburgerMenu.scss b/src/components/HamburgerMenu.scss
index 2da7714fe..a795739d8 100644
--- a/src/components/HamburgerMenu.scss
+++ b/src/components/HamburgerMenu.scss
@@ -13,7 +13,7 @@ button.HamburgerMenu {
     transition: 0.18s;
   }
 
-  &.HamburgerMenu__open {
+  &.is-open {
     :nth-child(1) {
       transform: rotate(-45deg) translate(-6px, 6px);
     }
diff --git a/src/components/Header.js b/src/components/Header.js
index 421d496b9..d27458f0d 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -33,9 +33,7 @@ const Header = ({ pages }) => {
   `);
 
   return (
-    <header
-      className={cx('Header--main', { 'Header--main__menuOpen': menuOpen })}
-    >
+    <header className={cx('Header--main', { 'is-open': menuOpen })}>
       <Container>
         <nav
           role="navigation"
diff --git a/src/components/Header.scss b/src/components/Header.scss
index 64c566b44..a1bc3fd73 100644
--- a/src/components/Header.scss
+++ b/src/components/Header.scss
@@ -119,7 +119,7 @@ header.Header--main {
     }
   }
 
-  &.Header--main__menuOpen nav {
+  &.is-open nav {
     @media (max-width: 760px) {
       background-color: var(--color-white);
       display: block;