diff --git a/client/src/components/Header/components/universal-nav.tsx b/client/src/components/Header/components/universal-nav.tsx
index 9da7a223f1..03a646f57d 100644
--- a/client/src/components/Header/components/universal-nav.tsx
+++ b/client/src/components/Header/components/universal-nav.tsx
@@ -37,7 +37,7 @@ export const UniversalNav = ({
 
   const search =
     typeof window !== `undefined` && isLanding(window.location.pathname) ? (
-      <SearchBarOptimized />
+      <SearchBarOptimized innerRef={searchBarRef} />
     ) : (
       <SearchBar innerRef={searchBarRef} />
     );
diff --git a/client/src/components/Header/index.tsx b/client/src/components/Header/index.tsx
index 42e0989e2c..40d890f09d 100644
--- a/client/src/components/Header/index.tsx
+++ b/client/src/components/Header/index.tsx
@@ -44,6 +44,8 @@ export class Header extends React.Component<
       this.state.displayMenu &&
       this.menuButtonRef.current &&
       !this.menuButtonRef.current.contains(event.target) &&
+      // since the search bar is part of the menu on small screens, clicks on
+      // the search bar should not toggle the menu
       this.searchBarRef.current &&
       !this.searchBarRef.current.contains(event.target)
     ) {
diff --git a/client/src/components/search/searchBar/search-bar-optimized.tsx b/client/src/components/search/searchBar/search-bar-optimized.tsx
index f4d0f35d6c..cea824cfec 100644
--- a/client/src/components/search/searchBar/search-bar-optimized.tsx
+++ b/client/src/components/search/searchBar/search-bar-optimized.tsx
@@ -3,7 +3,11 @@ import { useTranslation } from 'react-i18next';
 import Magnifier from '../../../assets/icons/Magnifier';
 import { searchPageUrl } from '../../../utils/algolia-locale-setup';
 
-const SearchBarOptimized = (): JSX.Element => {
+type Props = {
+  innerRef?: React.RefObject<HTMLDivElement>;
+};
+
+const SearchBarOptimized = ({ innerRef }: Props): JSX.Element => {
   const { t } = useTranslation();
   const placeholder = t('search.placeholder');
   const searchUrl = searchPageUrl;
@@ -18,7 +22,7 @@ const SearchBarOptimized = (): JSX.Element => {
   };
 
   return (
-    <div className='fcc_searchBar' data-testid='fcc_searchBar'>
+    <div className='fcc_searchBar' data-testid='fcc_searchBar' ref={innerRef}>
       <div className='fcc_search_wrapper'>
         <div className='ais-SearchBox' data-cy='ais-SearchBox'>
           <form