From 288eb02a3affb92a2ac08665c1752a7ea92d19d1 Mon Sep 17 00:00:00 2001
From: Ashish Vaghela <ashish.vaghela@nelkinda.com>
Date: Tue, 7 Apr 2026 18:23:30 +0530
Subject: [PATCH] fix(navbar): Resolve item overlap on medium screens by
 adjusting breakpoint and spacing

---
 website/src/css/custom.css | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index dd7bf90..6e48552 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -27,6 +27,7 @@
   --ifm-font-size-base: 16px;
   --ifm-heading-font-weight: 700;
   --docusaurus-highlighted-code-line-bg: rgba(30, 155, 215, 0.1);
+  --ifm-navbar-sidebar-window-width: 1200px;
 }
 
 [data-theme='dark'] {
@@ -100,6 +101,24 @@ body { font-feature-settings: 'liga' 1, 'calt' 1; }
 }
 .navbar__link:hover { color: #38BDF8 !important; }
 
+/* Responsive navbar spacing for medium screens to prevent overlap */
+@media (max-width: 1450px) and (min-width: 1201px) {
+  .navbar__link {
+    padding: 0.2rem 0.35rem !important;
+    font-size: 0.74rem !important;
+  }
+  .navbar__link--sponsor {
+    padding: 0.25rem 0.6rem !important;
+    font-size: 0.78rem !important;
+  }
+  .navbar__items--right {
+    gap: 0.4rem !important;
+  }
+  .navbar__brand {
+    margin-right: 0.5rem !important;
+  }
+}
+
 /* Light mode navbar */
 [data-theme='light'] .navbar {
   background: rgba(255,255,255,0.9) !important;