Docs

[maheu88]

Hello!

I am trying to achieve the following: I want to have a transparent navbar which is over the first column, so the text is in the picture. After scrolling down, I want that the navbar is not transparent anymore, but has is for example with white background (also the font colour of the main manu needs to change then).

Here is an example of what I want (just not with chaging font colour): http://conference.face.eu/

With the help of this forum I already achieved the transparent navbar. I used this code for custom css:

.x-navbar {
background-color: transparent !important;
border: 0;
}
.x-logobar{
background-color: transparent !important;
}
.masthead {
height:0px;
}

Now I just need it to change the background, after scrolling down.

Thanks in advance!

Cheers!

[Christian]

Hey there,

Upon checking the background is white once you’ve scrolled. Looks like you achieved what you need.

Thanks.

[maheu88]

Hello,

The site (http://conference.face.eu/) is an example of what I want, not my site.

Cheers!

[Christian]

In that case, please give us the URL of your site so we could check your setup.

Thanks.

[maheu88]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for the URL. I’d like to check but I am getting this on your site – http://prntscr.com/cm6pgc

Make sure it’s up and running.

[maheu88]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. I can see the effect on your site. So it seems you did it already. What else you need to fix?

Let us know.

[maheu88]

When I scroll down, the navbar is still transparent. I need it to change to a white background (and other font colour) after scrolling down. Just as in the example….

[Rad]

Hi there,

Please check this other thread, https://community.theme.co/forums/topic/transparent-header-on-home-page-only/

Your CSS should be enough and it’s working, but your sample/ideal site triggers the transparency based on scroll position. With the code from that thread, you’ll just need to change the 200 value.

Thanks!

[maheu88]

Which code do I have to use of this thread? There are many different codes.

[Christopher]

Hi there,

Please add following code in Customize/Custom/JavaScript :

jQuery(document).ready(function($){
			$('.x-navbar-fixed-top').addClass("transparent-navbar");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-navbar-fixed-top').removeClass("transparent-navbar").addClass("white");
		} else {
			$('.x-navbar-fixed-top').removeClass("white").addClass("transparent-navbar");
		}
	});
});

Add this CSS as well:

.white{
background-color:#fff;
}
.transparent-navbar{
background-color:transparent;
}

Hope it helps.

[maheu88]

No, doesn’t help at all. After deleting my old code (as in my first post) the navbar was even not over the picture, but above in a white navbar. When adding your CSS to my old CSS it is just as before, but no effect with scrolling.

[Christopher]

Hi there,

I’m not able check WP dashboard. It shows follwoing message after logging in :

Sorry for the inconvenience.
Our website is currently undergoing scheduled maintenance.
Thank you for your understanding.

Please check.

Thanks.

[maheu88]

Which user role do you need for checking? I will change it.

[Author]

Posts