diff --git a/opentech/static_src/src/javascript/main.js b/opentech/static_src/src/javascript/main.js
index 72f51de55fe7fd56a351631f5c24e39d431dc63e..ea8e83040b49d5b0a8e76389aa94d68a9ffd0e4d 100755
--- a/opentech/static_src/src/javascript/main.js
+++ b/opentech/static_src/src/javascript/main.js
@@ -104,8 +104,8 @@
         }
     };
 
-    // remove no-js class if js is enabled
-    document.querySelector('html').classList.remove('no-js');
+    // Replace no-js with js class if js is enabled.
+    document.querySelector('html').classList.replace('no-js', 'js');
 
     $(MobileMenu.selector()).each((index, el) => {
         new MobileMenu($(el), $('.js-mobile-menu-close'), $('.header__menus--mobile'), $('.header__search'));
diff --git a/opentech/static_src/src/sass/apply/base/_base.scss b/opentech/static_src/src/sass/apply/base/_base.scss
index 17a897268d9fbc3768f5733a611e7300c9fd758f..265736153de24ff77c32a9139992cb3708fe91a7 100755
--- a/opentech/static_src/src/sass/apply/base/_base.scss
+++ b/opentech/static_src/src/sass/apply/base/_base.scss
@@ -80,6 +80,20 @@ ol {
     display: none;
 }
 
+.js-hidden,
+%js-hidden {
+    html.js & {
+        @extend %is-hidden;
+    }
+}
+
+.no-js-hidden,
+%no-js-hidden {
+    html.nojs & {
+        @extend %is-hidden;
+    }
+}
+
 .is-unhidden,
 %is-unhidden {
     display: block;
diff --git a/opentech/static_src/src/sass/public/base/_base.scss b/opentech/static_src/src/sass/public/base/_base.scss
index 748e1f9de54b0759d60f2dac698afe24b10ac6fc..fd23d62dac9af43a8c816b421118b783bfca8b77 100755
--- a/opentech/static_src/src/sass/public/base/_base.scss
+++ b/opentech/static_src/src/sass/public/base/_base.scss
@@ -74,11 +74,26 @@ ol {
     transition: opacity, z-index, $transition;
 }
 
+.hidden,
 .is-hidden,
 %is-hidden {
     display: none;
 }
 
+.js-hidden,
+%js-hidden {
+    html.js & {
+        @extend %is-hidden;
+    }
+}
+
+.no-js-hidden,
+%no-js-hidden {
+    html.nojs & {
+        @extend %is-hidden;
+    }
+}
+
 .is-unhidden,
 %is-unhidden {
     display: block;