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

fix mobile screen issue

Browse Source
This commit is contained in:
Aravind R
2026-06-06 13:55:33 +05:30
parent 91841ba3f4
commit ab67fec091
20 changed files with 707 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -550,6 +550,17 @@ export default function Header() {
#masthead .menu-trigger {
display: block !important;
}
/* Sticky header on scroll for mobile/tablet too — the desktop
rule lived only in the min-width:1025px block, so on phones the
absolutely-positioned navbar scrolled away with the page. Pin it
to the top once scrolled past 50px, matching desktop behaviour. */
#masthead .elementor-element.elementor-element-466de1b.dm-header-scrolled {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
}
}
@media (max-width: 480px) {
@@ -571,6 +582,34 @@ export default function Header() {
display: block !important;
}
}
/* The bundled 'fontello' subset is missing the search (\\e85c) and
close (\\e845) glyphs, so those two icons render as empty tofu
boxes. Replace them with inline SVGs via CSS masks so they paint
in the current text colour (matching the working cart/user icons)
and respond to hover. */
#masthead .header-icon.search-link .search-trigger-icon::before,
#masthead .header-icon.menu-close .menu-close-icon::before {
content: "" !important;
display: block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
#masthead .header-icon.search-link .search-trigger-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
}
#masthead .header-icon.menu-close .menu-close-icon::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E");
}
`,
}}
/>