fix: dynamically measure navbar height for hero section sizing
This commit is contained in:
@@ -10,7 +10,7 @@
|
||||
{{-- ═══════════════════════════════════════════════════════════════
|
||||
SECTION 1 — HERO (full viewport, always visible)
|
||||
═══════════════════════════════════════════════════════════════ --}}
|
||||
<section class="relative flex items-center overflow-hidden" style="min-height: calc(100vh - 4rem);">
|
||||
<section class="relative flex items-center overflow-hidden" style="min-height: calc(100dvh - var(--nav-h, 4rem));">
|
||||
<!-- Parallax ambient blobs -->
|
||||
<div class="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
<div class="absolute -top-40 -right-40 w-[500px] h-[500px] bg-primary/20 rounded-full blur-[120px] animate-pulse"
|
||||
@@ -840,4 +840,15 @@
|
||||
observe();
|
||||
document.addEventListener('livewire:navigated', observe);
|
||||
})();
|
||||
|
||||
/* ── Dynamically measure navbar height ── */
|
||||
(function () {
|
||||
function setNavH() {
|
||||
const nav = document.querySelector('nav.fixed');
|
||||
if (nav) document.documentElement.style.setProperty('--nav-h', nav.offsetHeight + 'px');
|
||||
}
|
||||
setNavH();
|
||||
window.addEventListener('resize', setNavH);
|
||||
document.addEventListener('livewire:navigated', setNavH);
|
||||
})();
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user