[thisiscarloParticipant]

Website is http://freshlypressedinc.com. Is there any way I could have it so that the nav bar is transparent only before any scrolling happens, and then keep the sticky header and white background once the user scrolls?

[ThaiModerator]

Hi There,

Thanks for writing in!

#1] Try adding following CSS under Appearance > Customize > Custom > CSS:

.home .x-main.full {
	margin-top: -70px;
}
.x-navbar {
	background-color: transparent;
	border: none;
}
#x-content-band-1 {
	background-position: 50% 0;
}

#2] Try adding following Javascript under Appearance > Customize > Custom > Javascript:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 0) {
			$('.x-navbar-fixed-top').css("background-color", "#fff");
			$('.x-navbar-fixed-top').css("box-shadow", "0 0.15em 0.35em 0 rgba(0,0,0,0.135)");
		} else {
			$('.x-navbar-fixed-top').css("background-color", "transparent");
			$('.x-navbar-fixed-top').css("box-shadow", "none");
			$('#x-content-band-1').css('background-position', '50% 0');
		}
	});
});

Hope it helps.

[thisiscarloParticipant]

That worked perfectly! Thank you so much.

[NicoModerator]

You’re most welcome.

Have a great day! 🙂

[thisiscarloParticipant]

Follow up question — would this work using the Renew stack?

[FriechModerator]

Hi There,

It should, assuming that your Navbar position is set to Fixed Top. If that does not work try the code below instead:

You can add this under Custom > JavaScript in the Customizer.

jQuery(document).ready(function($){
	$('.x-navbar').addClass("x-nav-trans");
	$(window).scroll(function(){
		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar-fixed-top').addClass("x-nav-trans");
		}else{
			$('.x-navbar-fixed-top').removeClass("x-nav-trans");
		}
	});
});

And this under Custom CSS

.x-nav-trans {background-color: transparent !important;}

Hope it helps, Cheers!

[YaqubParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Did you add the CSS on the customizer? I’ve just test it on your site and it did work, but its not obvious because the navbar background and the body background are both white. You can test this instead so you would see the effect.

.x-nav-trans {background-color: red !important;}

If it works change the red to transparent.

Hope it helps, Cheers!

[YaqubParticipant]

Hi, thanks for getting back to me.

How exactly did you test it? I’ve tried it 3 times(CSS and all), clearing the cache in between attempts, and still nothing. I even tried adding the red background and no red in sight…

I have a revslider below the masthead that I’d like to be visible beneath the transparent navbar, similar to http://freshlypressedinc.com/ that was mentioned at the top of this thread or thecuratedtravel.com.

Any idea how to accomplish this or why the above code isn’t working for me?

Cheers

[JadeModerator]

Hi there,

Please try to add this in the Customizer:

header.masthead.masthead-inline {
    position: absolute;
    width: 100%;
}

Hope this helps.

[YaqubParticipant]

That did the trick! Thanks a bunch.

[ZeshanMember]

You’re welcome! 🙂

[YaqubParticipant]

Looks like I may have spoken a little bit too soon. The navbar looks good, but I’m using a revslider below the masthead and now the scroll bottom button takes the screen down too far below the revslider into my next section. I’m assuming it’s about 70px too far, which is the height of the navbar…

How can I compensate for this extra scroll length?

And on a somewhat related note, how can I adjust the location of the of the ‘scroll bottom anchor’ for the slider? It’s set at bottom center and I’d like to move it up about 25px.

Many Thanks

[ChristopherModerator]

Hi there,

Please remove this code :

header.masthead.masthead-inline {
    position: absolute;
    width: 100%;
}

And add this :

.x-slider-container.below {
    margin-top: -100px;
}
a.x-slider-scroll-bottom.below.bottom.center {
    right: 42%;
    left: auto;
    top: 88%;
}

Hope it helps.

[openers12Participant]

This reply has been marked as private.

[Author]

Posts