diff --git a/opentech/static_src/src/javascript/components/search.js b/opentech/static_src/src/javascript/components/search.js
index 124b786615acbde917d253fdac02c18ec5df7399..bd67e2da511ddb471e0ca5833c28742f88ec7652 100644
--- a/opentech/static_src/src/javascript/components/search.js
+++ b/opentech/static_src/src/javascript/components/search.js
@@ -20,6 +20,9 @@ class Search {
         // swap the icons
         this.node[0].querySelector('.header__icon--open-search').classList.toggle('is-hidden');
         this.node[0].querySelector('.header__icon--close-search').classList.toggle('is-unhidden');
+
+        // add modifier to header to be able to change header icon colours
+        document.querySelector('.header').classList.toggle('search-open');
     }
 }