diff --git a/docusaurus.config.js b/docusaurus.config.js
index e886f1d8cd97..b7a845d37da1 100755
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -108,14 +108,6 @@ module.exports = {
         "protobuf",
       ],
     },
-    // algolia: {
-    //   // apiKey: "5f882bef2dfc81f5f1b4e5ea87b2f165",
-    //   appId: 'DY1AXAPBQY',
-    //   apiKey: '391ef440955a44a32cbeb5e7db9a2b6c',
-    //   indexName: "apache_shenyu",
-    //   // Optional: see doc section below
-    //   contextualSearch: true,
-    // },
     imageZoom: {
       // CSS selector to apply the plugin to, defaults to '.markdown img'
       selector: '.markdown img',
diff --git a/src/css/custom.css b/src/css/custom.css
index b3d3c3c891db..366a34f8ffa7 100755
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -27,3 +27,70 @@
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgba(0, 0, 0, 0.3);
 }
+
+/* ===== Navbar Style Overrides ===== */
+:root {
+  --ifm-navbar-height: 52px;
+  --ifm-navbar-padding-vertical: 0;
+  --ifm-navbar-padding-horizontal: 1rem;
+}
+
+.navbar {
+  height: var(--ifm-navbar-height);
+  min-height: var(--ifm-navbar-height);
+  padding: 0 var(--ifm-navbar-padding-horizontal);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+.navbar__inner {
+  height: 100%;
+  flex-wrap: nowrap;
+}
+
+.navbar__brand {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.navbar__logo {
+  height: 28px;
+  max-width: 180px;
+  width: auto;
+}
+
+.navbar__title {
+  display: none;
+}
+
+.navbar__item {
+  padding: 0 0.6rem;
+  font-size: 0.9rem;
+}
+
+.navbar__link {
+  line-height: normal;
+}
+
+.navbar-sidebar {
+  top: var(--ifm-navbar-height);
+}
+
+/* ===== Responsive Breakpoint: Switch to Hamburger Menu when Viewport ≤ 1200px ===== */
+/* Coverage Scenario: Situations where the effective viewport size decreases—e.g., when the browser is zoomed in to 125%–250%. */
+/* Infima defaults to switching at 996px; however, due to the large number of menu items, the breakpoint needs to be shifted earlier to 1200px. */
+@media (max-width: 1200px) {
+  .navbar__toggle {
+    display: inherit;
+  }
+
+  .navbar__item {
+    display: none;
+  }
+
+  /* 保留搜索框在移动端可见 */
+  .navbar__search {
+    display: flex;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
index 179e92f57963..f598b805a26e 100755
--- a/src/pages/index.module.css
+++ b/src/pages/index.module.css
@@ -347,32 +347,3 @@
     right: 0px !important;
   }
 }
-
-@media screen and (max-width: 576px) {
-  .hero {
-    padding: 1.5rem 0.5rem;
-  }
-
-  .heroProjectTitle {
-    font-size: 2rem;
-  }
-
-  .heroProjectTagline {
-    font-size: 18px;
-  }
-
-  .buttonGetStarted,
-  .buttonGithub {
-    width: 8rem;
-    font-size: 14px;
-  }
-
-  .indexCtas a:last-of-type {
-    margin: 20px 16px;
-  }
-
-  .logoContainer {
-    min-height: 250px;
-    margin-top: 1.5rem;
-  }
-}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 03cd1179a2a8..dfc3f3702892 100755
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -33,7 +33,7 @@ function Home() {
       <main>
         <div className={styles.hero}>
           <div className="row" style={{ alignItems: "center" }}>
-            <div className="col col--5  col--offset-1">
+            <div className="col col--5 col--offset-1">
               <h1 className={styles.heroProjectTitle}>
                 <img
                   src="/img/logo.svg"