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

fix naver in small screen

Browse Source
This commit is contained in:
Aravind R
2026-06-08 17:58:09 +05:30
parent bbe8f0d92b
commit 263e03937f
1 changed files with 44 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;