diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx b/packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx
index 236d237aa082..1bfc3d3ba036 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Search/index.tsx
@@ -15,5 +15,9 @@ export default function NavbarSearch({
children,
className,
}: Props): JSX.Element {
- return
{children}
;
+ return (
+
+ {children}
+
+ );
}
diff --git a/packages/docusaurus-theme-classic/src/theme/Navbar/Search/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Navbar/Search/styles.module.css
index ca386bb12db9..b4e81167aeb2 100644
--- a/packages/docusaurus-theme-classic/src/theme/Navbar/Search/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Navbar/Search/styles.module.css
@@ -5,15 +5,23 @@
* LICENSE file in the root directory of this source tree.
*/
+/*
+Workaround to avoid rendering empty search container
+See https://github.com/facebook/docusaurus/pull/9385
+*/
+.navbarSearchContainer:not(:has(> *)) {
+ display: none;
+}
+
@media (max-width: 996px) {
- .searchBox {
+ .navbarSearchContainer {
position: absolute;
right: var(--ifm-navbar-padding-horizontal);
}
}
@media (min-width: 997px) {
- .searchBox {
+ .navbarSearchContainer {
padding: var(--ifm-navbar-item-padding-vertical)
var(--ifm-navbar-item-padding-horizontal);
}