/* --- Original CSS --- */ .header-animated { position: fixed; top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px)); z-index: 999; min-width: 100%; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); transition: padding 0.5s ease, box-shadow 0.5s ease; } .header-animated .header-bg { content: ""; position: absolute; /* Added for clarity, as inset implies it */ inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(212, 209, 194, 1), rgba(204, 200, 184, 1), rgba(218, 217, 204, 1) ); background-size: 1000% 1000%; animation: animatedGradient 36s ease infinite; opacity: 0.15; transition: opacity 0.4s ease; pointer-events: none; } @keyframes animatedGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes oscillateOpacity { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.4; } } /* --- ADDED FIX --- */ /* * This disables the blur effect on the header ONLY when the menu is open, * which fixes the 100vh clipping issue. * * IMPORTANT: You may need to replace 'body.is-menu-open' with the * actual class your site uses (e.g., 'body.mobile-menu-active'). * Use your browser's "Inspect" tool on the tag to find it. */ .header-animated:has(.is-menu-open) { backdrop-filter: none; -webkit-backdrop-filter: none; }