Docs

[wpStan.com]

I will be using the “Renew” Stack on a new web-site I am developing. I have not purchased it yet.

I would like to make the background of my Nav Bar see through, then have it turn solid upon scroll down like this site: http://bigdropinc.com/

Is that possible with this Stack? Or any of the Stacks?

If so, can you assist?

As I stated before, the site is not online yet, I’m trying to decide if I can achieve the effect I want before I start building the site.

[Rad]

Hi there,

Thanks for writing in.

Yes, that is possible 🙂

Please check this thread https://theme.co/x/member/forums/topic/transparent-headernavbar-only-when-on-top-of-page/

Hope that helps.

[wpStan.com]

Thank you I will try this…

[Friech]

Let us know how it goes, Cheers!

[wpStan.com]

This reply has been marked as private.

[Rad]

Hi there,

Your slider is currently black with image of this http://stan.wpstan.com/wp-content/plugins/revslider/images/transparent.png

I’m not really sure what issue should I be looking for. And youre slider is not set for fixed top.

Would you mind providing a visual guide of how I could see the issue?

Thanks!

[wpStan.com]

This reply has been marked as private.

[Nabeel A]

Hi again,

You’ll need to activate the Slider below masthead first and then add the following jQuery script via Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
	$('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.x-navbar-fixed-top').css("background-color", "#fff");
		} else {
			$('.x-navbar-fixed-top').css("background-color", "transparent");
		}
	});
});

Please remove any previous customization you’ve done to achieve this as this may not take effect due to your customization.

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[wpStan.com]

Okay, I replaced my previous Javascript code with what you have provided.

I also removed all the previous customization that was in the CSS field.

What’s Next?

Nothing has changed on my site other than the picture is now below the MastHead as you requested.

I have also cleared the browsers cache.

[Lely]

Hello There,

To see the changes, we have to set your Navbar Position to Fixed Top. Go to Appearance > Customize > Header > Navbar Position > Fixed Stop.

Please also edit the following CSS:
From this

.x-navbar, .x-navbar .sub-menu {
  background-color: #2c3e50 !important;
}

To this

.x-navbar .sub-menu {
  background-color: #2c3e50 !important;
}

Hope this helps.

[wpStan.com]

Almost There. I have made changes you suggested.

Only problem is when you visit the site the Nav Bar still has a white background.

BUT if you scroll the mouse down just a little the white background disappears and the Nav background is transparent.

How do I get site to load w/out any background under the Nav Bar at all BEFORE scrolling?

[Thai]

Hi There,
Try adding following CSS under Appearance > Customize > Custom > CSS:

.x-slider-container.below {
  margin-top: -90px;
}

Screenshots:
+ http://i.imgur.com/Ja9KVKW.png
+ http://i.imgur.com/v4XtDsl.png
Hope it helps.

[wpStan.com]

Looks like that did the trick! 🙂 Thanks!

Now how do I make it so that, this only affects the home page navigation and NOT all my other pages navigation.

Meaning I do not want my others pages navigation to be “transparent” then change to solid. I only want this effect on the home page.

Right now the only links that work on my site are: “Home” and “About Me”

[Christopher]

Hi there,

Update your code in Customize -> Custom -> JavaScript :

jQuery(document).ready(function($){
	$('.home .x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.home .x-navbar-fixed-top').css("background-color", "#fff");
		} else {
			$('.home .x-navbar-fixed-top').css("background-color", "transparent");
		}
	});
});

Hope it helps.

[wpStan.com]

1.) Thanks, my About Me page still has a transparent background, appears as if that did not work.

2.) Also I noticed there is dark blue background to my Nav Bar in the customizer, I don’t know why this is there or how to change it. http://prntscr.com/79zogt

[Author]

Posts