Doormile/doormile_react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix navbar issue

Browse Source
This commit is contained in:
Aravind R
2026-06-08 19:21:37 +05:30
parent 263e03937f
commit e93785f2b6
1 changed files with 42 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/layout/Header.tsx
View File

@@ -531,47 +531,66 @@ export default function Header() {
} }
} }
/* ── Desktop navbar spacing (Mac M1 / medium-desktop fix) ── /* ── Desktop navbar layout (3-section balanced grid) ──
On 1440–1728px viewports the logo sat flush against the nav The earlier Mac-M1 fix used justify-content:space-between, which
pill because every flex/gap rule for this row lives inside the on wide screens flung the logo and nav to opposite edges and
max-width:1024px blocks — on desktop the row fell back to left a large asymmetric gap between them. Replace it with a
Elementor's default packing with zero gap. Give the header row responsive three-column grid so the nav stays optically centred
real flexbox spacing: a responsive gap between the grid icon, with equal space on both sides, the logo group sits left and the
the logo, and the nav pill, and keep the logo from shrinking so Contact button right — proportional at every desktop width.
the separation holds 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) { @media (min-width: 1025px) {
/* Main header row: grid icon+logo on the left, nav pill on the #masthead .elementor-element.elementor-element-466de1b {
right, with breathing room between the two groups. */ display: grid !important;
#masthead .elementor-element.elementor-element-d681ece { grid-template-columns: 1fr auto 1fr !important;
display: flex !important;
align-items: center !important; align-items: center !important;
justify-content: space-between !important; column-gap: clamp(16px, 2vw, 32px) !important;
flex-wrap: nowrap !important; /* Equal left/right safe areas pull the logo and Contact
gap: clamp(24px, 3vw, 48px) !important; 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 #masthead .elementor-element.elementor-element-e052838,
and stop the whole group from being squeezed into the nav. */ #masthead .elementor-element.elementor-element-d681ece {
display: contents !important;
}
/* navbar-left: menu/grid icon + logo */
#masthead .elementor-element.elementor-element-472172e { #masthead .elementor-element.elementor-element-472172e {
justify-self: start !important;
display: flex !important; display: flex !important;
align-items: center !important; align-items: center !important;
gap: clamp(16px, 1.5vw, 28px) !important; gap: clamp(16px, 1.5vw, 28px) !important;
flex: 0 0 auto !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 { #masthead .elementor-element.elementor-element-846e53d {
flex-shrink: 0 !important; flex-shrink: 0 !important;
} }
/* Nav container scales responsively but never bleeds into the /* navbar-center: navigation menu, optically centred. */
logo area. */
#masthead .elementor-element.elementor-element-e44ee7e { #masthead .elementor-element.elementor-element-e44ee7e {
justify-self: center !important;
display: flex !important; display: flex !important;
align-items: center !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;
} }
} }