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) ──
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;
}
}