Additional Info at a glance
Customizer > Aditional CSS
Make sure to assign CSS Class ‘floating-header’ to the header Element
/* HEADER SMOOTH BACKDROP BLUR */
/* 1. Reset both desktop and mobile main rows so they don't hold a solid background */
.wp-block-kadence-header-row406_9540f6-fa {
background: transparent !important;
position: fixed; /* Keep this for desktop if desktop is meant to be permanently fixed */
}
.wp-block-kadence-header-row406_230700-18 {
background: transparent !important;
/* Removed position: fixed so Kadence's scroll-up script can control it! */
}
/* 2. Create the fake background layer behind both desktop and mobile menu items */
.wp-block-kadence-header-row406_9540f6-fa::before,
.wp-block-kadence-header-row406_230700-18::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: rgba(255, 255, 255, 0.2) !important;
backdrop-filter: blur(3px) !important;
-webkit-backdrop-filter: blur(3px) !important;
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
/* 3. FIX FOR MOBILE MARGIN CUT: Expand the background layer upward to clear the hard line */
.wp-block-kadence-header-row406_230700-18::before {
top: -30px !important; /* Pulls the blur element up beyond the top margin line */
bottom: -20px !important; /* Slightly expands the bottom so the gradient fade remains balanced */
}
/* SCROLL BEHAVIOR: visible on load, hide on scroll down, reveal on scroll up */
body.kadence-header-hidden .wp-block-kadence-header-row406_9540f6-fa,
body.kadence-header-hidden .wp-block-kadence-header-row406_230700-18 {
opacity: 0;
transform: translateY(-18px);
pointer-events: none;
}
body.kadence-header-visible .wp-block-kadence-header-row406_9540f6-fa,
body.kadence-header-visible .wp-block-kadence-header-row406_230700-18 {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
transition: opacity 0.45s ease, transform 0.45s ease;
}Snippets > All Snippets > Add New > HTML
Name: Floating Header Fade Down
Make sure the snippet is located in site footer (end of <body>)
<script>
document.addEventListener('DOMContentLoaded', function () {
let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
const body = document.body;
const hideAfter = 80;
function setVisible() {
body.classList.add('kadence-header-visible');
body.classList.remove('kadence-header-hidden');
}
function setHidden() {
body.classList.add('kadence-header-hidden');
body.classList.remove('kadence-header-visible');
}
setVisible();
window.addEventListener('scroll', function () {
const st = window.pageYOffset || document.documentElement.scrollTop;
if (st <= hideAfter) {
setVisible();
} else if (st > lastScrollTop) {
setHidden();
} else if (st < lastScrollTop) {
setVisible();
}
lastScrollTop = st <= 0 ? 0 : st;
}, { passive: true });
});
</script>You need to export + import this Header to Kadence.
1. On pattern-hub.gotb.dev go to Kadence > Headers, Export Floating Header
2. On your dev site go to Kadence > Headers, Import Floating Header
Lina