diff --git a/packages/gatsby-theme-aio/src/components/Layout/index.js b/packages/gatsby-theme-aio/src/components/Layout/index.js
index 41262de947..7fe8dfd0b6 100644
--- a/packages/gatsby-theme-aio/src/components/Layout/index.js
+++ b/packages/gatsby-theme-aio/src/components/Layout/index.js
@@ -804,6 +804,7 @@ export default ({ children, pageContext, location }) => {
                     z-index: 10;
                     width: 100%;
                     height: 100%;
+                    opacity: ${showSearch ? 1 : 0};
                     visibility: ${showSearch ? "visible" : "hidden"};`}
               ></iframe>
             )}