[Edward WilliamsParticipant]

Hey there!

I’d like to be able to do this same here as found in this theme: https://pixelgrade.com/demos/themes/?product=rosa

It’s transparent in the hero image, but as soon as you hit the content, the background turns white. Is this possible?

[Edward WilliamsParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

.x-navbar {
    background-color: transparent;
    margin-top: -71px;
}
.x-navbar.x-navbar-fixed-top {
    margin-top: 0;
    background-color: #282828;
}

Hope that helps.

[Edward WilliamsParticipant]

That didn’t work.

The navbar disappears completely until you start scrolling.

[ChristopherModerator]

Hi there,

Please update previous code to following :

@media (min-width:979px){
header.masthead.masthead-inline {
    height: 0;
}
.x-navbar.x-navbar-fixed-top.white {
    background-color: #282828;
}
.x-navbar {
    background-color: transparent;
    box-shadow: none;
    border: none;
}
}

Add this in Customize/Custom/JavaScript :

jQuery(document).ready(function($){
			$('.x-navbar-fixed-top').addClass("transparent-navbar");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 500) {
			$('.x-navbar-fixed-top').removeClass("transparent-navbar").addClass("white");
		} else {
			$('.x-navbar-fixed-top').removeClass("white").addClass("transparent-navbar");
		}
	});
});

Hope it helps.

[Edward WilliamsParticipant]

It worked!

You’re the man, Christopher! Thank you!

[ChristopherModerator]

Glad to be able to help 🙂

[Author]

Posts