Hi,

Sorry for the late reply,

We can do it with some custom JavaScript code. Let me know if I can go ahead to implement it.

Feel free to ask for anything you need.

Kind Regards

Hi,

I've just fixed it by adding the following JS and CSS code to your header template.

<script>
    document.addEventListener('DOMContentLoaded', function () {
  const header = document.querySelector('.elementor-element-9862b3e');
  const scrollClass = 'is-scrolled';
  const stickyClass = 'is-sticky';

  if (!header) return;

  // Make header sticky
  header.style.position = 'fixed';
  header.style.top = '0';
  header.style.left = '0';
  header.style.width = '100%';
  header.style.zIndex = '999';

  // Add top margin to next section to prevent jump
  const nextEl = header.nextElementSibling;
  if (nextEl) {
    nextEl.style.marginTop = `${header.offsetHeight}px`;
  }

  window.addEventListener('scroll', function () {
    if (window.scrollY > 10) {
      header.classList.add(scrollClass, stickyClass);
    } else {
      header.classList.remove(scrollClass, stickyClass);
    }
  });
});

</script>

.elementor-element-9862b3e {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.elementor-element-9862b3e.is-scrolled {
  background-color: #ffffff; /* 👈 change to your preferred sticky color */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

Feel free to ask for anything you need.

Kind Regards

You are welcome anytime, feel free to ask for anything you need

If you like our theme or the support, please leave us a rate of 5 stars at ThemeForest, that would help us a lot.

Kind Regards,
NeuronThemes