Hey @wondering2,
What you can do is turn off the transparent header option from the plugin and add the following custom CSS. This CSS is basically what the plugin adds for transparent header minus the CSS that makes the header full transparent. So this will fall back to the color that you have used for the row.
.fl-builder.dhf-template-beaver-builder-theme:not(.bhf-sticky-header) header .fl-row-content-wrap,
.fl-builder.dhf-template-generatepress:not(.bhf-sticky-header) header .fl-row-content-wrap,
.fl-builder.dhf-template-generatepress:not(.bhf-sticky-header) .site-header,
.fl-builder.dhf-template-genesis:not(.bhf-sticky-header) header .fl-row-content-wrap,
.fl-builder.dhf-template-genesis:not(.bhf-sticky-header) .site-header {
border: none;
transition: background-color 0.3s ease-in-out;
}
.fl-builder.dhf-template-beaver-builder-theme .fl-page,
.fl-builder.dhf-template-generatepress .fl-page,
.fl-builder.dhf-template-genesis .fl-page {
position: relative;
}
.fl-builder.dhf-template-beaver-builder-theme header#masthead,
.fl-builder.dhf-template-generatepress header#masthead,
.fl-builder.dhf-template-genesis header#masthead {
position: absolute;
z-index: 10;
width: 100%;
}
.fl-builder.dhf-template-genesis .site-inner {
padding-top: 0;
margin-top: 0;
}
~ Nik
This is great, however I wanted to have different opacities on load and on scroll so that when it scrolls it becomes more opaque, so in other words 2 separate settings, like 40% on load and 70% on scroll. This is something i was able to do with Divi but I have abandoned Divi for Beaver Builder. If you think you might put this in the next UI then I will wait for that. I would gladly pay for the plugin if it had this functionality along with a UI that allows me to select which pages it goes on. Thanks!
Hey @wondering2,
I will surely get this as an option in future releases of the plugin 🙂
~ Nik
