How to make background of Nav Bar see through, then Solid upon scroll down – Themeco Community https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/feed/ Wed, 05 Nov 2025 20:31:05 +0000 https://bbpress.org/?v=2.6.14 en-US https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-279736 <![CDATA[How to make background of Nav Bar see through, then Solid upon scroll down]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-279736 Fri, 22 May 2015 21:49:21 +0000 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.

]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-279933 <![CDATA[Reply To: How to make background of Nav Bar see through, then Solid upon scroll down]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-279933 Sat, 23 May 2015 03:36:54 +0000 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.

]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-279981 <![CDATA[Reply To: How to make background of Nav Bar see through, then Solid upon scroll down]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-279981 Sat, 23 May 2015 04:54:30 +0000 wpStan.com Thank you I will try this…

]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-280005 <![CDATA[Reply To: How to make background of Nav Bar see through, then Solid upon scroll down]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-280005 Sat, 23 May 2015 05:27:51 +0000 Friech Let us know how it goes, Cheers!

]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-280863 <![CDATA[Reply To: How to make background of Nav Bar see through, then Solid upon scroll down]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-280863 Sun, 24 May 2015 22:26:19 +0000 wpStan.com https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-280950 <![CDATA[Reply To: How to make background of Nav Bar see through, then Solid upon scroll down]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-280950 Mon, 25 May 2015 01:37:11 +0000 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!

]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-282254 <![CDATA[Reply To: How to make background of Nav Bar see through, then Solid upon scroll down]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-282254 Tue, 26 May 2015 17:23:53 +0000 wpStan.com https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-282332 <![CDATA[Reply To: How to make background of Nav Bar see through, then Solid upon scroll down]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-282332 Tue, 26 May 2015 19:16:54 +0000 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!

]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-282344 <![CDATA[Reply To: How to make background of Nav Bar see through, then Solid upon scroll down]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-282344 Tue, 26 May 2015 19:26:19 +0000 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.

]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-282557 <![CDATA[Reply To: How to make background of Nav Bar see through, then Solid upon scroll down]]> https://theme.co/archive/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/#post-282557 Wed, 27 May 2015 01:35:17 +0000 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.

]]>