diff --git a/assets/css/layout.css b/assets/css/layout.css
index 826bfa0b0..a4cc95bb5 100644
--- a/assets/css/layout.css
+++ b/assets/css/layout.css
@@ -122,7 +122,7 @@ body.sidebar-closed .content {
   left: 0;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (hover: none) {
   .content,
   body.sidebar-opening .content {
     left: 0;
diff --git a/assets/css/search-bar.css b/assets/css/search-bar.css
index 30db46eb5..b133bcabc 100644
--- a/assets/css/search-bar.css
+++ b/assets/css/search-bar.css
@@ -1,6 +1,19 @@
 .top-search {
+  position: relative;
+  top: 0;
   margin-top: 10px;
   background-color: var(--background);
+  z-index: 101;
+}
+
+@media only screen and (hover: hover) {
+  .top-search {
+    padding: 0.8rem 0;
+  }
+}
+
+.top-search.sticky {
+  position: sticky;
 }
 
 .search-settings {
diff --git a/assets/js/helpers.js b/assets/js/helpers.js
index a7155d6c1..99a18eedc 100644
--- a/assets/js/helpers.js
+++ b/assets/js/helpers.js
@@ -161,10 +161,21 @@ export function getProjectNameAndVersion () {
 }
 
 /**
- * Return `true` if the client's OS is MacOS
+ * Return `true` if the client's OS is MacOS.
  *
  * @return {Boolean}
  */
 export function isMacOS () {
   return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)
 }
+
+/**
+ * Return `true` if the client's device is touch-enabled.
+ *
+ * @return {Boolean}
+ */
+export function isTouchDevice () {
+  return (('ontouchstart' in window) ||
+    (navigator.maxTouchPoints > 0) ||
+    (navigator.msMaxTouchPoints > 0))
+}
diff --git a/assets/js/search-bar.js b/assets/js/search-bar.js
index a987eb8ef..74e3ba177 100644
--- a/assets/js/search-bar.js
+++ b/assets/js/search-bar.js
@@ -7,10 +7,11 @@ import {
   AUTOCOMPLETE_CONTAINER_SELECTOR,
   AUTOCOMPLETE_SUGGESTION_SELECTOR
 } from './autocomplete/autocomplete-list'
-import { isMacOS, qs } from './helpers'
+import { isMacOS, isTouchDevice, isVisible, qs } from './helpers'
 
 const SEARCH_INPUT_SELECTOR = 'form.search-bar input'
 const SEARCH_CLOSE_BUTTON_SELECTOR = 'form.search-bar .search-close-button'
+const TOP_SEARCH_SELECTOR = '.top-search'
 
 /**
  * Initializes the sidebar search box.
@@ -34,6 +35,8 @@ export function setSearchInputValue (value) {
  */
 export function focusSearchInput () {
   const searchInput = qs(SEARCH_INPUT_SELECTOR)
+  const topSearch = qs(TOP_SEARCH_SELECTOR)
+  topSearch.classList.add('sticky')
   searchInput.focus()
 }
 
@@ -136,15 +139,18 @@ function clearSearch () {
 function hideAutocomplete () {
   document.body.classList.remove('search-focused')
   hideAutocompleteList()
+  qs(TOP_SEARCH_SELECTOR).classList.remove('sticky')
 }
 
 let lastScrollTop = window.scrollY
-const topSearch = document.querySelector('.top-search')
+const topSearch = document.querySelector(TOP_SEARCH_SELECTOR)
 const sidebarMenu = document.getElementById('sidebar-menu')
 const backgroundLayer = document.querySelector('.background-layer')
 const scrollThreshold = 70 // Set a threshold for scroll, adjust as needed
 
 window.addEventListener('scroll', function () {
+  if (!isTouchDevice()) { return }
+
   const currentScroll = window.scrollY
 
   // Add 'fixed' class when not at the top