Transparent Header & Blocks

Custom Coding
,
1

If you want to apply a background image and/or color and have it show behind the header and any other blocks, start with this…

<style>
body {
background-color: #ff0000;
background-image: url("https://example.com/your-image.png");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.spr-content-root,
.spr-horizontal-header,
.spr-horizontal-header header,
div[category="Hero"],
div[category="Pricing"] {
background-color: transparent !important;
}
</style>

the category lines will remove the background from all blocks of that type.

3 Likes
2

Thanks for sharing it with us @jclay12345 :dizzy:

1 Like
3

I found a solution that fixes the issue, although there’s still a thin white line showing below the navigation bar.

But overall, it works well for me — the navigation bar starts off transparent, and then changes to a solid color when you scroll down the page.

Here’s the code I used:

CSS (for transparent header that changes on scroll)

/* Transparent header setup */
.softr-topbar {
  background: transparent !important;    /* Makes the background clear */
  box-shadow: none !important;           /* Removes any shadow at the top */
  position: fixed !important;            /* Keeps the header fixed at the top */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;                         /* Ensures it stays above everything else */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  border-bottom: none !important;        /* Removes any bottom border */
}

/* Optional: style links/buttons when header is transparent */
.softr-topbar a,
.softr-topbar .button {
  /* color: white !important; */         /* Uncomment this if your background is dark */
  transition: color 0.3s ease;
}

/* When you scroll past a certain point */
.softr-topbar.scrolled {
  background-color: var(--color-primary) !important;  /* Changes to solid background */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important; /* Adds a subtle shadow */
}

/* Changes link/button colors for visibility after scroll */
.softr-topbar.scrolled a,
.softr-topbar.scrolled .button {
  color: #000000 !important;  /* Makes text dark for better contrast */
}

JavaScript (to trigger the scroll effect)

<script>
window.addEventListener("scroll", function () {
  const topbar = document.querySelector(".softr-topbar");
  const scrollThreshold = 200; // Adjust this number to set when the nav changes

  if (window.scrollY > scrollThreshold) {
    topbar.classList.add("scrolled");
  } else {
    topbar.classList.remove("scrolled");
  }
});
</script>