Docs

[Nuera]

I have a number of customizations on a landing page I’m creating that include a transparent header over a rev slider hero, which also shrinks on scroll, and the logo changes to an icon. The header is only transparent on the homepage, as I would like the remaining pages to remain exactly as-is.

It’s all working well, but I’m just trying to figure out how to add a semi-opaque header at the point the header effects begin. I would like the header color to be rgba(51, 51, 51, 0.8)

I’ll share the login details separately if you care to check out what CSS/JS I already have in place.

Thanks in advance!

[Nuera]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-navbar.navScroll {
	background-color: rgba(51, 51, 51, 0.8) !important;
}

Hope this helps.

Cheers!

[Nuera]

Thanks, Rupok! That worked perfectly.

Now the very last thing I need to bring this bad boy to the finish line is that I’ve got to figure out a way to vertically center the “Contact” button once the scrolling header appears. I imagine it would be a tweak within one of my existing code sections, but I can’t figure out which parameter to edit.

Could you help me figure that out?

Thanks so much!

[Thai]

Hi There,

Please also add this CSS:

.x-navbar.navScroll #menu-item-136 > a {
    padding-top: 18px;
}

Hope it helps 🙂

[Nuera]

Oh that is absolutely perfect. Thank you so much for your swift assistance!!!

[Nuera]

Oh, I did see one thing on mobile that I’d like to correct. Is there a way to create an exception so that the logo does not change on mobile or tablets? I think that looks best only on larger screens.

Here is my current code for that effect:

/*  Switch Logo on Scroll  */
jQuery(document).ready(function($){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
      $('.x-navbar-fixed-top').css("background-color", "#fff");
      $('.x-navbar-fixed-top .x-brand img').attr('src','https://renaissanceindustrial.com/wp-content/uploads/2016/09/logo_alt.svg');
    } else {
      $('.x-navbar .x-brand img').attr('src','https://renaissanceindustrial.com/wp-content/uploads/2017/03/logo_gray-2.svg');
    }
  });
});

[Nabeel A]

Hi again,

You can try replacing the previous code with the following code:

jQuery(document).ready(function($){
	if ( $(window).width() > 767 ) {
		$(window).scroll(function(){
			if ($(this).scrollTop() > 0) {
				$('.x-navbar-fixed-top').css("background-color", "#fff");
				$('.x-navbar-fixed-top .x-brand img').attr('src','https://renaissanceindustrial.com/wp-content/uploads/2016/09/logo_alt.svg');
			} else {
				$('.x-navbar .x-brand img').attr('src','https://renaissanceindustrial.com/wp-content/uploads/2017/03/logo_gray-2.svg');
			}
		});
	}
});

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

[Nuera]

Perfect! You guys are the best.

Thank you again!

[Paul R]

You’re welcome and thank you for your kind words. 🙂

[Author]

Posts