diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css
index be0eca1b..bd7cff8e 100644
--- a/public/build/beike/shop/default/css/app.css
+++ b/public/build/beike/shop/default/css/app.css
@@ -465,6 +465,24 @@ header .navbar-icon-link-badge {
   line-height: 19px;
 }
 
+#offcanvas-search-top {
+  height: 100px;
+  justify-content: center;
+}
+#offcanvas-search-top .offcanvas-header {
+  width: 100%;
+}
+#offcanvas-search-top input:focus {
+  box-shadow: none;
+}
+#offcanvas-search-top .btn-close {
+  padding: 1rem;
+  opacity: 1;
+}
+#offcanvas-search-top .btn-close:hover {
+  background-color: #eee;
+}
+
 #offcanvas-right-cart .offcanvas-right-products .product-list {
   padding: 1rem 0;
   border-top: 1px solid #eee;
diff --git a/public/build/beike/shop/default/js/app.js b/public/build/beike/shop/default/js/app.js
index 28922afa..b3b32e67 100644
--- a/public/build/beike/shop/default/js/app.js
+++ b/public/build/beike/shop/default/js/app.js
@@ -2545,17 +2545,21 @@ $(document).ready(function ($) {
       } else {
         $('.total-old').remove();
         $('.fixed-top-line').removeAttr('style');
-      } // if ($(this).scrollTop() > totalWrapTop) {
-      //   $('.fixed-top-line').addClass('fixed-top-line-fixed').css({'left': totalWrapLeft, 'width': totalWrapWidth})
-      //   if ($('.total-old').length > 0) return;
-      //   $('.fixed-top-line').before('<div class="total-old" style="height:' + totalWrapHeight + 'px; width:100%;"></div>');
-      // } else {
-      //   $('.total-old').remove();
-      //   $('.fixed-top-line').removeClass('fixed-top-line-fixed').css({'left': 0, 'width': 'auto'})
-      // }
-
+      }
     });
-  })(window.jQuery);
+  })(window.jQuery); // offcanvas-search-top
+
+
+  var myOffcanvas = document.getElementById('offcanvas-search-top');
+  myOffcanvas.addEventListener('shown.bs.offcanvas', function () {
+    $('#offcanvas-search-top input').focus();
+    $('#offcanvas-search-top input').keydown(function (e) {
+      if (e.keyCode == 13) {
+        console.log('enter');
+        $('#offcanvas-search-top .btn-search').click();
+      }
+    });
+  });
 });
 
 bk.getCarts = function () {
diff --git a/resources/beike/shop/default/css/header.scss b/resources/beike/shop/default/css/header.scss
index dd1a7ed4..626a7312 100644
--- a/resources/beike/shop/default/css/header.scss
+++ b/resources/beike/shop/default/css/header.scss
@@ -90,6 +90,30 @@ header {
   }
 }
 
+#offcanvas-search-top {
+  height: 100px;
+  justify-content: center;
+
+  .offcanvas-header {
+    width: 100%;
+  }
+
+  input {
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .btn-close {
+    padding: 1rem;
+    opacity: 1;
+
+    &:hover {
+      background-color: #eee;
+    }
+  }
+}
+
 #offcanvas-right-cart {
   .offcanvas-right-products {
     .product-list {
diff --git a/resources/beike/shop/default/js/app.js b/resources/beike/shop/default/js/app.js
index 2a97eec7..32b234a5 100644
--- a/resources/beike/shop/default/js/app.js
+++ b/resources/beike/shop/default/js/app.js
@@ -65,18 +65,20 @@ $(document).ready(function ($) {
         $('.total-old').remove();
         $('.fixed-top-line').removeAttr('style')
       }
-
-
-      // if ($(this).scrollTop() > totalWrapTop) {
-      //   $('.fixed-top-line').addClass('fixed-top-line-fixed').css({'left': totalWrapLeft, 'width': totalWrapWidth})
-      //   if ($('.total-old').length > 0) return;
-      //   $('.fixed-top-line').before('<div class="total-old" style="height:' + totalWrapHeight + 'px; width:100%;"></div>');
-      // } else {
-      //   $('.total-old').remove();
-      //   $('.fixed-top-line').removeClass('fixed-top-line-fixed').css({'left': 0, 'width': 'auto'})
-      // }
     })
   })(window.jQuery);
+
+  // offcanvas-search-top
+  var myOffcanvas = document.getElementById('offcanvas-search-top')
+  myOffcanvas.addEventListener('shown.bs.offcanvas', function () {
+    $('#offcanvas-search-top input').focus();
+    $('#offcanvas-search-top input').keydown(function (e) {
+      if (e.keyCode == 13) {
+        console.log('enter');
+        $('#offcanvas-search-top .btn-search').click();
+      }
+    })
+  })
 });
 
 bk.getCarts = function () {
diff --git a/themes/default/layout/header.blade.php b/themes/default/layout/header.blade.php
index 709b6e93..67113fb0 100644
--- a/themes/default/layout/header.blade.php
+++ b/themes/default/layout/header.blade.php
@@ -63,7 +63,7 @@
       </div>
       <div class="right-btn">
         <ul class="navbar-nav flex-row">
-          <li class="nav-item"><a href="" class="nav-link"><i class="iconfont">&#xe8d6;</i></a></li>
+          <li class="nav-item"><a href="#offcanvas-search-top" data-bs-toggle="offcanvas" aria-controls="offcanvasExample" class="nav-link"><i class="iconfont">&#xe8d6;</i></a></li>
           <li class="nav-item"><a href="{{ shop_route('account.wishlist.index') }}" class="nav-link"><i class="iconfont">&#xe662;</i></a></li>
           <li class="nav-item dropdown">
             <a href="{{ shop_route('account.index') }}" class="nav-link"><i class="iconfont">&#xe619;</i></a>
@@ -82,7 +82,6 @@
             </ul>
           </li>
           <li class="nav-item">
-            {{-- <a href="javascript:vido(0)" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-right-cart" aria-controls="offcanvas-right-cart" class="nav-link"><i class="iconfont">&#xe634;</i></a> --}}
             <a class="nav-link" data-bs-toggle="offcanvas" href="#offcanvas-right-cart" role="button" aria-controls="offcanvasExample">
               <i class="iconfont">&#xe634;</i>
               <div class="navbar-icon-link-badge"></div>
@@ -99,19 +98,6 @@
     </div>
     <div class="offcanvas-body">
       <div class="offcanvas-right-products">
-  {{--       @for ($i = 0; $i < 20; $i++)
-          <div class="product-list d-flex align-items-center">
-            <div class="left"><img src="https://via.placeholder.com/140x140.png/eeeeee" calss="img-fluid"></div>
-            <div class="right flex-grow-1">
-              <div class="name fs-sm fw-bold mb-2">测试商品名称事实上</div>
-              <div class="price mb-2">22.22</div>
-              <div class="product-bottom d-flex justify-content-between align-items-center">
-                @include('shared.quantity', ['quantity' => '1'])
-                <span>删除</span>
-              </div>
-            </div>
-          </div>
-        @endfor --}}
       </div>
     </div>
     <div class="offcanvas-footer">
@@ -125,5 +111,12 @@
       </div>
     </div>
   </div>
+
+  <div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvas-search-top" aria-labelledby="offcanvasTopLabel">
+    <div class="offcanvas-header">
+      <input type="text" class="form-control input-group-lg border-0 fs-4" focus placeholder="Type your search here" aria-label="Type your search here" aria-describedby="button-addon2">
+      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+    </div>
+  </div>
 </header>