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

www.breakwaterengineering.ca

Lina