Can someone please help me make the navigation header background transparent on desktop devices, while keeping it the same on mobile and tablet?
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>
I fixed the thin white line by using the CSS below — now the navigation bar looks perfect:
/* Remove all borders and shadows from topbar and related elements */
.softr-topbar,
.softr-topbar::before,
.softr-topbar::after,
._5cbf61c_m9ntthf,
._5cbf61c_m9ntthg,
._5cbf61c_m9ntthh,
._5cbf61c_m9ntthk,
._5cbf61c_m9ntthn,
._5cbf61c_m9ntthd {
border: none !important;
box-shadow: none !important;
background-image: none !important;
}
/* Optional: If a separator line is added via height or top border */
._5cbf61c_m9ntthj {
height: 0 !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
Hi Herbert,
One upgrade you might need to consider 
Selectors like ._5cbf61c_m9ntthd etc are not stable. Meaning they can change every day, or every week or every month (and you won’t have any information about these changes as it appears they are randomly generated). In other words you never know when these will change and how often they will change.
A better approach would be to come back to your first style sheet and change
.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 */
}
By
.softr-topbar,
.softr-topbar > div {
background: transparent !important;
position: fixed !important;
width: 100%;
z-index: 9999;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
border: none !important;
box-shadow: none !important;
background-image: none !important;
}
This should remove the line and shadow without relying on unstable selectors.
Wow! Thanks, it works perfectly. Cheers 
Hello @matthieu_chateau could you have a code on how to customize all buttons, please because i use the below css and i don’t know if the classes will change too:
/*--- === First Button ======== ---*/
.MuiGrid-root .MuiButton-root,
.MuiGrid-root .MuiButton-contained,
.MuiGrid-root .MuiButton-containedPrimary {
background-color: var(--color-button);
/* border: 2px solid var(--color-button);
text-transform: uppercase;*/
font-weight: 600;
transition: color 200ms ease-in;
z-index: 1;
color: var(--color-primary);
}
.MuiGrid-root .MuiButton-root::after{
content: "";
position: absolute;
top: 0px;
left: -100%;
width: 100%;
height: 100%;
border-radius: 48px;
z-index: -1;
cursor: pointer;
transition: all 200ms ease-in;
background-color: var(--color-primary);
}
.MuiGrid-root .MuiButton-root:focus:active,
.MuiGrid-root .MuiButton-root:focus,
.MuiGrid-root .MuiButton-root:hover {
border-color: ;
background-color: var(--color-primary);
color: var(--color-white);
transition: color 200ms ease-in,background-color 0s linear 200ms
}
.MuiGrid-root .MuiButton-root:active::after,
.MuiGrid-root .MuiButton-root:focus::after,
.MuiGrid-root .MuiButton-root:hover::after {
left: 0px
}
Here is what you should know:
Selectors that include “Mui” are stable — they rely on the Material UI library. These are mostly used in static blocks (which haven’t been re-designed yet).
A bit of history to give the wider context: previously, all blocks used the Material UI library. Softr has since transitioned to the Radix UI library for dynamic blocks (except for those that haven’t been re-designed yet).
This may change in the future — static blocks might also use the Radix UI library once they are re-designed.
For now, as long as these blocks haven’t been re-designed, you’re safe to rely on their current selectors. Of course, you’ll be informed if and when these blocks are updated.
1 Like
Thanks @matthieu_chateau for the update, much appreciated