From 263e03937f51de20950b2914618dd3e7afbc0a45 Mon Sep 17 00:00:00 2001
From: Aravind R <aravind@tenext.in>
Date: Mon, 8 Jun 2026 17:58:09 +0530
Subject: [PATCH] fix naver in small screen

---
 src/components/layout/Header.tsx | 44 ++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 24276e1..8b16443 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -531,6 +531,50 @@ export default function Header() {
                 }
             }
 
+            /* ── Desktop navbar spacing (Mac M1 / medium-desktop fix) ──
+               On 1440–1728px viewports the logo sat flush against the nav
+               pill because every flex/gap rule for this row lives inside the
+               max-width:1024px blocks — on desktop the row fell back to
+               Elementor's default packing with zero gap. Give the header row
+               real flexbox spacing: a responsive gap between the grid icon,
+               the logo, and the nav pill, and keep the logo from shrinking so
+               the separation holds at every desktop width. */
+            @media (min-width: 1025px) {
+                /* Main header row: grid icon+logo on the left, nav pill on the
+                   right, with breathing room between the two groups. */
+                #masthead .elementor-element.elementor-element-d681ece {
+                    display: flex !important;
+                    align-items: center !important;
+                    justify-content: space-between !important;
+                    flex-wrap: nowrap !important;
+                    gap: clamp(24px, 3vw, 48px) !important;
+                }
+
+                /* Logo group (grid icon + logo): space the icon off the logo
+                   and stop the whole group from being squeezed into the nav. */
+                #masthead .elementor-element.elementor-element-472172e {
+                    display: flex !important;
+                    align-items: center !important;
+                    gap: clamp(16px, 1.5vw, 28px) !important;
+                    flex: 0 0 auto !important;
+                }
+
+                /* Logo never shrinks — preserves a hard edge against the nav. */
+                #masthead .elementor-element.elementor-element-846e53d {
+                    flex-shrink: 0 !important;
+                }
+
+                /* Nav container scales responsively but never bleeds into the
+                   logo area. */
+                #masthead .elementor-element.elementor-element-e44ee7e {
+                    display: flex !important;
+                    align-items: center !important;
+                    justify-content: flex-end !important;
+                    flex: 0 1 auto !important;
+                    min-width: 0 !important;
+                }
+            }
+
             #masthead .header-menu-container .main-menu > li.active > a:before {
                 background-color: #ffffff !important;
                 opacity: 1 !important;