diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
index 7d59c599a1e0..4131d79abe89 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
@@ -11,7 +11,7 @@
   }
 }
 
-@media (max-width: 360px) {
+@media only screen and (max-width: 768px) {
   .hideLogoText {
     display: none;
   }
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
index 6815d4ddca55..cbca9652a536 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/index.js
@@ -67,9 +67,11 @@ const Search = (props) => {
     );
   };
 
-  const handleSearchIcon = useCallback(() => {
+  const expandInput = useCallback(() => {
     loadAlgolia();
-
+    if (props.isSearchBarExpanded) {
+      return;
+    }
     if (algoliaLoaded) {
       searchBarRef.current.focus();
     }
@@ -78,7 +80,7 @@ const Search = (props) => {
   }, [props.isSearchBarExpanded]);
 
   const handleSearchInputBlur = useCallback(() => {
-    props.handleSearchBarToggle(!props.isSearchBarExpanded);
+    props.handleSearchBarToggle(false);
   }, [props.isSearchBarExpanded]);
 
   const handleSearchInput = useCallback((e) => {
@@ -88,17 +90,13 @@ const Search = (props) => {
   });
 
   return (
-    <div className="navbar__search" key="search-box">
-      <span
-        aria-label="expand searchbar"
-        role="button"
-        className={classnames('search-icon', {
-          'search-icon-hidden': props.isSearchBarExpanded,
-        })}
-        onClick={handleSearchIcon}
-        onKeyDown={handleSearchIcon}
-        tabIndex={0}
-      />
+    <div
+      role="button"
+      tabIndex={0}
+      className="navbar__search"
+      key="search-box"
+      onClick={expandInput}
+      onKeyDown={expandInput}>
       <input
         id="search_input_react"
         type="search"
diff --git a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
index f9053f584510..77e0b7a8b9e4 100644
--- a/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
+++ b/packages/docusaurus-theme-search-algolia/src/theme/SearchBar/styles.css
@@ -5,36 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.search-icon {
-  background-image: var(--ifm-navbar-search-input-icon);
-  height: auto;
-  width: 24px;
-  cursor: pointer;
-  padding: 8px;
-  line-height: 32px;
-  background-repeat: no-repeat;
-  background-position: center;
-  display: none;
-}
-
-.search-icon-hidden {
-  visibility: hidden;
-}
-
-@media (max-width: 360px) {
+@media only screen and (max-width: 768px) {
   .search-bar {
     width: 0 !important;
-    background: none !important;
-    padding: 0 !important;
-    transition: none !important;
+    cursor: pointer !important;
   }
 
   .search-bar-expanded {
-    width: 9rem !important;
-  }
-
-  .search-icon {
-    display: inline;
-    vertical-align: sub;
+    width: 13rem !important;
   }
 }