From e93785f2b672bd8e4ec08ba480ed47d3c9252b88 Mon Sep 17 00:00:00 2001
From: Aravind R <aravind@tenext.in>
Date: Mon, 8 Jun 2026 19:21:37 +0530
Subject: [PATCH] fix navbar issue

---
 src/components/layout/Header.tsx | 65 +++++++++++++++++++++-----------
 1 file changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 8b16443..495b32e 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -531,47 +531,66 @@ 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. */
+            /* ── Desktop navbar layout (3-section balanced grid) ──
+               The earlier Mac-M1 fix used justify-content:space-between, which
+               on wide screens flung the logo and nav to opposite edges and
+               left a large asymmetric gap between them. Replace it with a
+               responsive three-column grid so the nav stays optically centred
+               with equal space on both sides, the logo group sits left and the
+               Contact button right — proportional at every desktop width.
+
+               The logo group (472172e) and nav (e44ee7e) are nested inside
+               e052838 › d681ece, while the Contact button (f961133) is their
+               uncle. Those two wrappers carry no visual styling on desktop
+               (their background/padding live only in the <1024px mobile block),
+               so display:contents flattens them and promotes all three logical
+               sections to be direct items of one header grid. The grid only
+               applies >=1025px, leaving the mobile pill layout untouched. */
             @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;
+                #masthead .elementor-element.elementor-element-466de1b {
+                    display: grid !important;
+                    grid-template-columns: 1fr auto 1fr !important;
                     align-items: center !important;
-                    justify-content: space-between !important;
-                    flex-wrap: nowrap !important;
-                    gap: clamp(24px, 3vw, 48px) !important;
+                    column-gap: clamp(16px, 2vw, 32px) !important;
+                    /* Equal left/right safe areas pull the logo and Contact
+                       button inward off the viewport edges. Because the inset
+                       is symmetric, the 1fr side columns shrink equally and the
+                       centred nav does not shift. */
+                    padding-inline: clamp(24px, 3vw, 48px) !important;
+                    /* Consistent top/bottom breathing room inside the bar; with
+                       align-items:center every section stays vertically centred. */
+                    padding-block: clamp(8px, 1vw, 16px) !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-e052838,
+                #masthead .elementor-element.elementor-element-d681ece {
+                    display: contents !important;
+                }
+
+                /* navbar-left: menu/grid icon + logo */
                 #masthead .elementor-element.elementor-element-472172e {
+                    justify-self: start !important;
                     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. */
+                /* Logo never shrinks — keeps a clean 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. */
+                /* navbar-center: navigation menu, optically centred. */
                 #masthead .elementor-element.elementor-element-e44ee7e {
+                    justify-self: center !important;
                     display: flex !important;
                     align-items: center !important;
-                    justify-content: flex-end !important;
-                    flex: 0 1 auto !important;
-                    min-width: 0 !important;
+                }
+
+                /* navbar-right: Contact button, aligned to the right edge. */
+                #masthead .elementor-element.elementor-element-f961133 {
+                    justify-self: end !important;
                 }
             }