diff --git a/client/src/components/Header/Header.test.js b/client/src/components/Header/Header.test.js
index a1e88dc30d..14d1b84687 100644
--- a/client/src/components/Header/Header.test.js
+++ b/client/src/components/Header/Header.test.js
@@ -41,5 +41,6 @@ describe('<NavLinks />', () => {
 const UniversalNavProps = {
   displayMenu: false,
   menuButtonRef: {},
+  searchBarRef: {},
   toggleDisplayMenu: function() {}
 };
diff --git a/client/src/components/Header/components/MenuButton.js b/client/src/components/Header/components/MenuButton.js
index 1b6667aede..d8514f8d2f 100644
--- a/client/src/components/Header/components/MenuButton.js
+++ b/client/src/components/Header/components/MenuButton.js
@@ -1,25 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const MenuButton = React.forwardRef((props, ref) => {
-  return (
-    <button
-      aria-expanded={props.displayMenu}
-      className={
-        'toggle-button-nav' + (props.displayMenu ? ' reverse-toggle-color' : '')
-      }
-      onClick={props.onClick}
-      ref={ref}
-    >
-      Menu
-    </button>
-  );
-});
+const MenuButton = props => (
+  <button
+    aria-expanded={props.displayMenu}
+    className={
+      'toggle-button-nav' + (props.displayMenu ? ' reverse-toggle-color' : '')
+    }
+    onClick={props.onClick}
+    ref={props.innerRef}
+  >
+    Menu
+  </button>
+);
 
 MenuButton.displayName = 'MenuButton';
 MenuButton.propTypes = {
   className: PropTypes.string,
   displayMenu: PropTypes.bool.isRequired,
+  innerRef: PropTypes.object,
   onClick: PropTypes.func.isRequired
 };
 
diff --git a/client/src/components/Header/components/UniversalNav.js b/client/src/components/Header/components/UniversalNav.js
index 53ac87e344..801b9369e4 100644
--- a/client/src/components/Header/components/UniversalNav.js
+++ b/client/src/components/Header/components/UniversalNav.js
@@ -8,34 +8,35 @@ import MenuButton from './MenuButton';
 import NavLinks from './NavLinks';
 import './universalNav.css';
 
-export const UniversalNav = React.forwardRef(
-  ({ displayMenu, toggleDisplayMenu }, ref) => (
-    <nav
-      className={
-        'universal-nav nav-padding' + (displayMenu ? ' expand-nav' : '')
-      }
-      id='universal-nav'
+export const UniversalNav = ({
+  displayMenu,
+  toggleDisplayMenu,
+  menuButtonRef,
+  searchBarRef
+}) => (
+  <nav
+    className={'universal-nav nav-padding' + (displayMenu ? ' expand-nav' : '')}
+    id='universal-nav'
+  >
+    <div
+      className={'universal-nav-left' + (displayMenu ? ' display-flex' : '')}
     >
-      <div
-        className={'universal-nav-left' + (displayMenu ? ' display-flex' : '')}
-      >
-        <SearchBar />
-      </div>
-      <div className='universal-nav-middle'>
-        <Link id='universal-nav-logo' to='/'>
-          <NavLogo />
-        </Link>
-      </div>
-      <div className='universal-nav-right main-nav'>
-        <NavLinks displayMenu={displayMenu} />
-      </div>
-      <MenuButton
-        displayMenu={displayMenu}
-        onClick={toggleDisplayMenu}
-        ref={ref}
-      />
-    </nav>
-  )
+      <SearchBar innerRef={searchBarRef} />
+    </div>
+    <div className='universal-nav-middle'>
+      <Link id='universal-nav-logo' to='/'>
+        <NavLogo />
+      </Link>
+    </div>
+    <div className='universal-nav-right main-nav'>
+      <NavLinks displayMenu={displayMenu} />
+    </div>
+    <MenuButton
+      displayMenu={displayMenu}
+      innerRef={menuButtonRef}
+      onClick={toggleDisplayMenu}
+    />
+  </nav>
 );
 
 UniversalNav.displayName = 'UniversalNav';
@@ -44,5 +45,6 @@ export default UniversalNav;
 UniversalNav.propTypes = {
   displayMenu: PropTypes.bool,
   menuButtonRef: PropTypes.object,
+  searchBarRef: PropTypes.object,
   toggleDisplayMenu: PropTypes.func
 };
diff --git a/client/src/components/Header/index.js b/client/src/components/Header/index.js
index ddd1186a0e..5f045e794f 100644
--- a/client/src/components/Header/index.js
+++ b/client/src/components/Header/index.js
@@ -12,6 +12,7 @@ export class Header extends React.Component {
       displayMenu: false
     };
     this.menuButtonRef = React.createRef();
+    this.searchBarRef = React.createRef();
     this.handleClickOutside = this.handleClickOutside.bind(this);
     this.toggleDisplayMenu = this.toggleDisplayMenu.bind(this);
   }
@@ -29,7 +30,8 @@ export class Header extends React.Component {
       this.state.displayMenu &&
       this.menuButtonRef.current &&
       !this.menuButtonRef.current.contains(event.target) &&
-      event.target.id !== 'fcc_instantsearch'
+      this.searchBarRef.current &&
+      !this.searchBarRef.current.contains(event.target)
     ) {
       this.toggleDisplayMenu();
     }
@@ -48,7 +50,8 @@ export class Header extends React.Component {
         <header>
           <UniversalNav
             displayMenu={displayMenu}
-            ref={this.menuButtonRef}
+            menuButtonRef={this.menuButtonRef}
+            searchBarRef={this.searchBarRef}
             toggleDisplayMenu={this.toggleDisplayMenu}
           />
         </header>
diff --git a/client/src/components/search/searchBar/SearchBar.js b/client/src/components/search/searchBar/SearchBar.js
index dc2109e230..029529e10c 100644
--- a/client/src/components/search/searchBar/SearchBar.js
+++ b/client/src/components/search/searchBar/SearchBar.js
@@ -23,6 +23,7 @@ import './searchbar.css';
 configure({ ignoreTags: ['select', 'textarea'] });
 
 const propTypes = {
+  innerRef: PropTypes.object,
   isDropdownEnabled: PropTypes.bool,
   isSearchFocused: PropTypes.bool,
   toggleSearchDropdown: PropTypes.func.isRequired,
@@ -51,7 +52,6 @@ class SearchBar extends Component {
   constructor(props) {
     super(props);
 
-    this.searchBarRef = React.createRef();
     this.handleChange = this.handleChange.bind(this);
     this.handleSearch = this.handleSearch.bind(this);
     this.handleMouseEnter = this.handleMouseEnter.bind(this);
@@ -87,7 +87,7 @@ class SearchBar extends Component {
 
   handleFocus(e) {
     const { toggleSearchFocused } = this.props;
-    const isSearchFocused = this.searchBarRef.current.contains(e.target);
+    const isSearchFocused = this.props.innerRef.current.contains(e.target);
     if (!isSearchFocused) {
       // Reset if user clicks outside of
       // search bar / closes dropdown
@@ -177,15 +177,11 @@ class SearchBar extends Component {
   };
 
   render() {
-    const { isDropdownEnabled, isSearchFocused } = this.props;
+    const { isDropdownEnabled, isSearchFocused, innerRef } = this.props;
     const { index } = this.state;
 
     return (
-      <div
-        className='fcc_searchBar'
-        data-testid='fcc_searchBar'
-        ref={this.searchBarRef}
-      >
+      <div className='fcc_searchBar' data-testid='fcc_searchBar' ref={innerRef}>
         <HotKeys handlers={this.keyHandlers} keyMap={this.keyMap}>
           <div className='fcc_search_wrapper'>
             <label className='fcc_sr_only' htmlFor='fcc_instantsearch'>