Docs

[knowmates]

Hi there,

I’m trying to get a transparent header for our site based on icon stack but did’nt get it work until now. Could you please assist?

Many thanks

[knowmates]

This reply has been marked as private.

[Paul R]

Hi,

You can add this under Custom > CSS in the Customizer.

.home .x-navbar {
    border-bottom: 0;
    background-color: transparent;
}

.home .masthead {
    position: absolute;
    width: 100%; 
}

Hope that helps.

[knowmates]

Thank you that helped me. I’ve added “opactity” to get light transparent 🙂

[knowmates]

One more Question: is it possible that the transparency is only when we’re on top of the page? So that scrolling has a color?

[Thai]

Hi There,

#1] Please add the following Javascript under Customizer > Custom > Global Javascript:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if( $(window).width() < 480 ){
			return false;
		}
		if ($(this).scrollTop() == 0) {
			$('.x-navbar').removeClass('x-navbar-fixed-top');
		}
	});
});

#2] Please add the following CSS under Customizer > Custom > Global CSS:

.x-navbar.x-navbar-fixed-top {
    background-color: #efefef;
    opacity: 1;
}

Hope it helps 🙂

[Author]

Posts