/* header style */ /* Base header z-index - ensures header is always above content even without sticky/animation */ .hfammbfe-header-template, #hfammbfe-header { position: relative; z-index: 9999; } /* Sticky Header */ .hfammbfe-sticky-header { position: sticky; top: var(--hfammbfe-sticky-top, 0); z-index: 9999; } /* Transition class to smoothly show/hide header */ .hfammbfe-header-template.hfammbfe-header-scroll-animation:not(.hfammbfe-sticky-header) { position: sticky; top: 0; z-index: 9999; } /* When scrolling down, hide header */ .hfammbfe-header-hide { transform: translateY(-100%); opacity: 0; } /* When scrolling up, show header */ .hfammbfe-header-show { transform: translateY(0); opacity: 1; } .hfammbfe-header-scroll-animation { transition: transform 0.3s ease; } .hfammbfe-header-hidden { transform: translateY(-100%); opacity: 0; } /* ===== Admin bar gap fix ===== */ /* WordPress adds margin-top to when the admin bar is visible. For sticky/animated headers, the JS sets top = adminBarH so they stick flush under the admin bar — no negative margins needed here. The body margin-top naturally pushes static headers down correctly too. */ /* ===== Sticky + Animation hardening (desktop-safe) ===== */ /* 1) Use a CSS var for the top offset on sticky headers. */ .hfammbfe-sticky-header { top: var(--hfammbfe-sticky-top, 0); } /* 2) Fixed fallback when themes break CSS sticky on desktop. Works with either the new #hfammbfe-header id or your existing wrapper class. */ #hfammbfe-header.hfammbfe-sticky-active, .hfammbfe-header-template.hfammbfe-sticky-active { position: fixed; top: var(--hfammbfe-sticky-top, 0); left: 0; right: 0; width: 100%; z-index: 99999; /* above theme headers */ } /* 3) Spacer to prevent content jump when switching to fixed */ .hfammbfe-header-spacer { display: none; width: 100%; } /* 4) Scroll hide/show — support both your old class names and the new ones used by JS */ #hfammbfe-header.hfammbfe-scroll-down, .hfammbfe-header-template.hfammbfe-scroll-down, .hfammbfe-header-hidden, /* your existing */ .hfammbfe-header-hide { /* your existing */ transform: translateY(-100%); opacity: 0; } #hfammbfe-header.hfammbfe-scroll-up, .hfammbfe-header-template.hfammbfe-scroll-up, .hfammbfe-header-show { /* your existing */ transform: translateY(0); opacity: 1; } /* 5) Make sure transitions are smooth on the animated wrapper */ #hfammbfe-header, .hfammbfe-header-template.hfammbfe-header-scroll-animation { transition: transform .25s ease, opacity .25s ease; will-change: transform; } /* 6) Header Effects — Transparent → Solid on Scroll (editor-driven; see includes/class-hfammbfe-header-effects.php) */ .hfammbfe-effects-transparent-yes { background-color: transparent !important; position: absolute; top: 0; left: 0; right: 0; z-index: 10; } body.elementor-editor-active .hfammbfe-effects-transparent-yes, body.elementor-editor-preview .hfammbfe-effects-transparent-yes { position: relative !important; top: auto !important; left: auto !important; right: auto !important; z-index: auto !important; } /* Shadow is applied inline by JS (hfammbfe-header-effects.js) */ /* ═══════════════════════════════════════════════════════════════════ Smooth transitions for header effects ═══════════════════════════════════════════════════════════════════ */ .elementor-element[data-settings*="hfammbfe_header_effects"] { transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-bottom-width 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out, top 0.4s ease-in-out, width 0.4s ease-in-out, padding 0.4s ease-in-out, min-height 0.4s ease-in-out !important; } /* ═══════════════════════════════════════════════════════════════════ Hide Header on Scroll Down ═══════════════════════════════════════════════════════════════════ */ .hfammbfe-effects-header-hidden { transform: translateY(-110vh) !important; transition: transform 0.4s ease-in-out !important; } /* ═══════════════════════════════════════════════════════════════════ Logo & Image transitions during shrink ═══════════════════════════════════════════════════════════════════ */ .elementor-element[data-settings*="hfammbfe_header_effects"] .elementor-widget-theme-site-logo, .elementor-element[data-settings*="hfammbfe_header_effects"] .elementor-widget-image { transition: height 0.4s ease-in-out !important; } /* ═══════════════════════════════════════════════════════════════════ Admin bar offset (desktop only) ═══════════════════════════════════════════════════════════════════ */ @media screen and (min-width: 783px) { .admin-bar .elementor-element[data-settings*="hfammbfe_header_effects"]:not(.hfammbfe-effects-transparent-yes) { top: 32px; } }