diff --git a/docs/.vitepress/theme/styles/custom.scss b/docs/.vitepress/theme/styles/custom.scss
index 9a56ccf7..0dc4d7da 100644
--- a/docs/.vitepress/theme/styles/custom.scss
+++ b/docs/.vitepress/theme/styles/custom.scss
@@ -145,3 +145,52 @@ img.VPImage.image-src {
     margin-left: 17px;
 }
 // maximum document width style ends
+
+// vitepress navbar title line breaking issue tweak
+@media (max-width: 1080px) {
+    :root {
+        --vp-sidebar-width: 260px;
+    }
+    .VPNav {
+        // refering solutions by https://cn.vuejs.org
+        .DocSearch-Button-Placeholder {
+            display: none;
+        }
+        .VPNavBarMenuLink,
+        .VPNavBarMenuGroup .button {
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+    }
+}
+@media (max-width: 992px) {
+    .VPNav {
+        .VPNavBar {
+            padding-left: 24px;
+            padding-right: 24px;
+        }
+        .VPNavBarMenuLink,
+        .VPNavBarMenuGroup .button {
+            padding-left: 8px;
+            padding-right: 8px;
+        }
+    }
+}
+@media (max-width: 800px) {
+    .VPNav {
+        .VPNavBarSearch {
+            padding-left: 16px;
+        }
+        .VPNavBarMenuLink,
+        .VPNavBarMenuGroup .button {
+            padding-left: 6px;
+            padding-right: 6px;
+        }
+    }
+}
+
+// menu new-lining issue on title
+.VPMenuGroup .title {
+    white-space: nowrap;
+}
+// vitepress navbar style ends