diff --git a/docs/docusaurus/src/css/searchBar.scss b/docs/docusaurus/src/css/searchBar.scss
index af9c47986767..3c4b8b35c3fb 100644
--- a/docs/docusaurus/src/css/searchBar.scss
+++ b/docs/docusaurus/src/css/searchBar.scss
@@ -1,22 +1,7 @@
+@import "sass_variables.scss";
+
 div .custom-search-bar {
   padding: var(--ifm-navbar-item-padding-vertical) 0;
-
-}
-
-.custom-search-bar .DocSearch-Button {
-  background: none;
-
-  &-Placeholder {
-    display: none;
-  }
-
-  &-Container svg path {
-    stroke-width: 3;
-  }
-
-  &-Keys {
-    display: none;
-  }
 }
 
 [data-theme='dark'] .custom-search-bar .DocSearch-Button:hover {
@@ -26,3 +11,21 @@ div .custom-search-bar {
 [data-theme='dark'] .DocSearch-Form {
   background: none;
 }
+
+@media (max-width: $mobile-breakpoint) {
+  .custom-search-bar .DocSearch-Button {
+    background: none;
+
+    &-Placeholder {
+      display: none;
+    }
+
+    &-Container svg path {
+      stroke-width: 3;
+    }
+
+    &-Keys {
+      display: none;
+    }
+  }
+}