Docs

[Tristan A]

Thanks!

[Alexander]

You’re welcome!

[Jay B]

This feature is awesome and seems like it will come in handy! I’m going to use it on this site rgabucks.co.uk
Is there any way that the font can be a different color before scrolling down too? Then change to the normal desired colors after scrolling?
Be good if the logo could do this too (be a different color while in transparent mode until scrolling) like the link that was initially posted, but I understand if this isn’t possible.

Cheers
Jay

[Friech]

Hi Jay,

It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Cheers!

[C-suiteSB]

I’m sorry but for some reason I wasn’t able to get the same result when I added the code provided above to get the desired result on this site. http://razorfrog.com/

Can you point out what I’m doing wrong? I tried to change the transparency but it is still opaque regardless of what number I add in.

Please help?

[C-suiteSB]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in!

You can try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 0) {
			$('.x-navbar, .x-navbar .sub-menu').removeClass('x-navbar-solid trans').addClass("white");
		} else {
			$('.x-navbar, .x-navbar .sub-menu').removeClass("white").addClass("trans");
		}
	});
});

Then add the following CSS in your Customizer via Appearance > Customize > Custom > CSS:

.trans {
    background: rgba(255,255,255,0.5) !important;
}

.white {
    background: #fff !important;
}

Let us know how this goes!

[C-suiteSB]

Hey, that didn’t work. Did you get a chance to login and see for yourself. I’ve already used this code and have the same results. Can you tell me what I’m doing wrong? I still can’t get this to work like the reference website I listed.

The code works for changing the background color and font size but doesn’t affect the transparency. Onscroll its opaque not see-through.

Thx.

Jason

[Rue Nel]

Hello Jason,

Even without the code we gave you, the navbar will suppose to change from transparent to a solid color because you have this code:

.x-navbar {
    background-color: rgba(255,255,255,.55); /*Adjust .5 to the level of transparency you preferred*/
}

.x-navbar-solid {
      background-color: #2c3e50f !important;
}

However, your solid background color is not a valid hex code. Please update your code and use this instead:

.x-navbar {
    background-color: #fff !important;
    background-color: rgba(255,255,255,0.55) !important; /*Adjust .5 to the level of transparency you preferred*/
}

.x-navbar.x-navbar-fixed-top.x-navbar-solid {
   background-color: #2c3e50 !important;
   background-color: rgba(44, 62, 80, 1) !important;
}

Hope this helps. Please let us know how it goes.

[Author]

Posts