Docs

[Eric]

Hi Guys,

I had this working perfectly. The site loads with a transparent navigation, and adds a background color when you scroll, but it doesn’t go back transparent when you scroll back to top. What did I do wrong?

https://godbelongsinlouisville.org/

Thanks

[Nabeel A]

Hi there,

Please replace your script with this one in Customizer:

jQuery(document).ready(function($){
	$('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
	var rev_height = $(".x-slider-container").height();
	$(window).scroll(function(){
		if ($(this).scrollTop() > rev_height) {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: #fff !important');
		} else {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent !important');
		}
	});
});

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

[Eric]

Thanks for getting back with so so quickly! I added this, cleared my history and cache and there is no change. :/

Let me know if there is something else I should do.

[Thai]

Hi There,

Please remove your GA code under Customizer > Custom > Javascript:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-78232285-1', 'auto');
  ga('send', 'pageview');

</script>

Instead of inserting to Custom > JS, you can try with the Google Analytics extension: https://community.theme.co/kb/extension-google-analytics/.

Regards!

[Eric]

Hey there. We almost there!

When you are on some of the interior pages and scroll back to the top it goes back to transparent.

I have couple pages that don’t have a header image and the nav bar just stays this color: background-color: rgba(0,0,0, 0.8)

example: https://godbelongsinlouisville.org/shop/

Thanks so much for your support!

[Rupok]

Hi there,

Thanks for writing back. I have tested your site and I can see the above suggested code is working fine. If you change background-color: transparent !important to a different color (i.e. background-color: #f54 !important) then you will understand. It’s because when it’s transparent, it will show the background color of the element behind it. So instead of using transparent, you could set a color code.

Hope this makes sense.

[Eric]

Hi. Thanks for your response. I understand.

When I change background-color: transparent !important to background-color: rgba(0,0,0, 0.8) !important This looks exactly the way I want, but when you scroll back up it stays that colored background instead of being transparent, which was my original problem which if you read they title of this thread says. :/

Thanks again for your continued support.

[Jade]

Hi Eric,

I have just checked your site and the navbar’s transparency seems to be working fine. It initially loads transparent then an opaque background is added when it’s scrolled down and it gets back to being transparent when it’s scrolled back up. See screencast below. Would you mind clearing your browser cache and see if it sorts the issue out? Thank you.

[Eric]

Shoot. I thought I had pasted a page that I was talking about. I must have deleted it before I submitted. This is a page that I am talking about.

https://godbelongsinlouisville.org/shop/

Starts out with background-color: rgba(0,0,0, 0.8) !important then scrolls back up to a transparent navigation.

Sorry for the confusion. :/

[Rupok]

Hi there,

Kindly follow my previous response (#1016900) again carefully. That’s what I explained to you. You are still using transparent background – http://prntscr.com/bana81 and it’s true for the other pages as well – http://prntscr.com/banaka

But the difference is on your shop page the background behind it is white so you will see white where the other pages have black image on background. So again, change background-color: transparent !important to a different color, try solid color to test.

If you still face this, I’d suggest you to spend a few more minutes to understand this and changing the colors.

Hope this makes sense.

[Eric]

OK. Got it. Thank you so much!!!!

[Rupok]

You are welcome!

Glad that you figured it out. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts