diff --git a/src/docs/src/components/Navbar.svelte b/src/docs/src/components/Navbar.svelte
index a902b489eca..0eb113a85f6 100644
--- a/src/docs/src/components/Navbar.svelte
+++ b/src/docs/src/components/Navbar.svelte
@@ -11,6 +11,9 @@
 
   export let drawerContentScrollY
   $: switchNavbarStyle = drawerContentScrollY > 40 ? true : false
+
+  export let addScrollPaddingToNavbar
+  export let removeScrollPaddingFromNavbar
 </script>
 
 <div
@@ -40,7 +43,7 @@
         </a>
       </div>
       <div class="hidden w-full max-w-sm lg:flex">
-        <Search />
+        <Search {removeScrollPaddingFromNavbar} {addScrollPaddingToNavbar} />
       </div>
     </div>
     <div class="flex-0">
diff --git a/src/docs/src/components/Search.svelte b/src/docs/src/components/Search.svelte
index fbcbc778cc6..dade57414a6 100644
--- a/src/docs/src/components/Search.svelte
+++ b/src/docs/src/components/Search.svelte
@@ -35,6 +35,9 @@
     goto(searchIndex[detail.originalIndex].href)
     dispatch("search", detail)
   }
+
+  export let addScrollPaddingToNavbar
+  export let removeScrollPaddingFromNavbar
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -42,7 +45,7 @@
 <!-- svelte-ignore a11y-label-has-associated-control -->
 <label class={`searchbox relative mx-3 w-full`} bind:this={seachboxEl}>
   <svg class={`text-base-content pointer-events-none absolute z-10 my-3 ml-2 stroke-current opacity-60 ${$page.url.pathname == "/" ? "hidden" : ""}`} width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
-  <Typeahead placeholder={$t("Search") + "…"} limit={8} label="Search" data={searchIndex} extract={(item) => item.tags} inputAfterSelect="clear" on:select={onSelect} let:result>
+  <Typeahead placeholder={$t("Search") + "…"} limit={8} label="Search" data={searchIndex} extract={(item) => item.tags} inputAfterSelect="clear" on:select={onSelect} on:focus={removeScrollPaddingFromNavbar} on:blur={addScrollPaddingToNavbar} let:result>
     <div class="py-1 text-sm">
       {searchIndex[result.index].name}
     </div>
diff --git a/src/docs/src/routes/__layout.svelte b/src/docs/src/routes/__layout.svelte
index 0f60c62747a..14497233267 100644
--- a/src/docs/src/routes/__layout.svelte
+++ b/src/docs/src/routes/__layout.svelte
@@ -56,6 +56,15 @@
   function openDrawer() {
     checked = true
   }
+
+  let navbarScrollPadding = "5rem"
+  function addScrollPaddingToNavbar(action) {
+    navbarScrollPadding = "5rem"
+  }
+
+  function removeScrollPaddingFromNavbar(action) {
+    navbarScrollPadding = "0rem"
+  }
 </script>
 
 <svelte:head>
@@ -66,13 +75,13 @@
 
 <div class={`bg-base-100 drawer ${pagesThatDontNeedSidebar.includes($page.url.pathname) ? "" : "drawer-mobile"}`}>
   <input id="drawer" type="checkbox" class="drawer-toggle" bind:checked />
-  <div bind:this={drawercontent} on:scroll={parseContentScroll} class={`drawer-content`} style="scroll-behavior: smooth; scroll-padding-top: 5rem;">
-    <Navbar {drawerContentScrollY} />
+  <div bind:this={drawercontent} on:scroll={parseContentScroll} class={`drawer-content`} style="scroll-behavior: smooth; scroll-padding-top: {navbarScrollPadding};">
+    <Navbar {drawerContentScrollY} {addScrollPaddingToNavbar} {removeScrollPaddingFromNavbar} />
     <div class={`${pagesThatDontNeedSidebar.includes($page.url.pathname) ? "" : "p-6 pb-16"}`}>
       <slot />
     </div>
   </div>
-  <div class="drawer-side" style="scroll-behavior: smooth; scroll-padding-top: 5rem;" bind:this={drawersidebar} on:scroll={parseSidebarScroll}>
+  <div class="drawer-side" style="scroll-behavior: smooth; scroll-padding-top: {navbarScrollPadding};" bind:this={drawersidebar} on:scroll={parseSidebarScroll}>
     <label for="drawer" class="drawer-overlay" />
     <aside class="bg-base-200 w-80">
       <Sidebar {closeDrawer} {openDrawer} {drawerSidebarScrollY} />