controlling shrinking header opacity on load

  • Resolved wondering2

    (@wondering2)


    7 years, 9 months ago

    Hi–

    I mistakenly posted this earlier on a resolved post so I thought you might miss it. Is there a way to make the fixed shrinking header translucent instead of just transparent or opaque? I am using the BB child theme and I want to be able to see the background video in the row below behind the header but have the header be approx 50% opacity instead of just clear. The plugin controls override the page builder controls which I had set to black 50% opacity. I see that with header set to transparent that it takes on the page builder’s 50% background opacity setting but only AFTER I start scrolling. I’d like the header to be 50% opacity on initial page load before I start scrolling. I hope this makes sense. Thanks for a great plugin otherwise!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Nikhil Chavan

    (@nikschavan)

    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

    Thread Starter wondering2

    (@wondering2)

    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!

    Plugin Author Nikhil Chavan

    (@nikschavan)

    Hey @wondering2,

    I will surely get this as an option in future releases of the plugin ??

    ~ Nik

    Thread Starter wondering2

    (@wondering2)

    Awesome. Great work.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘controlling shrinking header opacity on load’ is closed to new replies.