Docs

[mathijs84]

Hi guys,

On the homepage of http://www.streamads.work-planning.com/ i have a transparent header. The rest of the pages is the normal color (black).

We want to make the navbar Fixed top, so i have set that in the customizer.

We would like to keep the homepage navbar Transparent at the top, but when you scrolll down, to make it black again.

Code i use now is:

.home .x-navbar-inner,
.home .x-navbar-wrap {
    min-height: 0;
    height: 100px;
}

.home .x-navbar {
    background-color: rgba(0,0,0,0) !important;
    background-image: url();
    border: none;
    box-shadow: none;

}.home .x-main.full {
    margin-top: -100px;
}

@media (max-width: 979px) {
/* push down site by height of menu */
body.page { margin-top:0px !important; }
}

[Rupok]

Hi there,

There are lot of threads for this topic. So let’s search and try the solutions.

https://community.theme.co/forums/topic/navbar-change/#post-207518

https://community.theme.co/forums/topic/navbar-color-change-on-scroll/

Cheers!

[mathijs84]

Thanks,

So i added

JS:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');

    if (scrollPos > 1000) {
      navbar.addClass('alt-color');
    } else {
      navbar.removeClass('alt-color');
    }
  });
});

CSS:

/* Menubar scrolling kleur */
.x-navbar {
    transition: 0.2s all linear;
}

.x-navbar.alt-color {
    background-color: #000 !important;
}

But is doesnt seem to work. I added important, because the transparent header also has important!!

[Thai]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[mathijs84]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your JS code to :

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 :

@media (min-width:979px){
.x-navbar.x-navbar-fixed-top.white {
    background-color: #fff !important;
} }

Hope it helps.

[mathijs84]

I added the code, but it doesnt seem to work

[Joao]

Hi there,

I have add the code above provided by Christopher on your website and it does work.

Hope that helps

Joao

[mathijs84]

Ok great!! Thanks

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts