Docs

[CooperReck]

My logo overlaps my header and I want to replace it with the title of the site when I scroll down, is that possible?

URL: emersondolbytaxidermy.com

[Christopher]

Hi there,

You can’t replace it with title of your site, but you can resize logo on scroll.

Please add following code in Customize -> Custom -> Global CSS :

.x-navbar.x-navbar-fixed-top.resize-logo .x-brand img, .x-navbar.x-navbar-fixed-top, .x-brand img, .x-brand {
    transition: all 0.3s linear;
}
.x-navbar.x-navbar-fixed-top.resize-logo .x-brand img {
    width: 7%;
}
.x-navbar.x-navbar-fixed-top.resize-logo .x-brand {
    margin-top: 0;
}

Please add following code in Customize -> Custom -> Global JavaScript :

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() >1) {
			$('.x-navbar').addClass("resize-logo");
		} else {
			$('.x-navbar').removeClass("resize-logo");
		}
	});
});

Hope it helps.

[CooperReck]

Could I replace it with a different image on scroll? And then have that image be non-overlapping?

[Joao]

Hi There,

Please follow this thread.

https://community.theme.co/forums/topic/different-logo-after-scrolling/

Hope it helps

Joao

[CooperReck]

Hi! So I followed the thread and got sort of what I wanted. But I have something else that I want to try. So basically, I want every logo(like on every page) to be an image of the title. Except on the home page, I want it to start as another logo(the badge like image that is there now) and have it follow the rules of the scrolling transition that I set up. Any ideas?

Thanks

[Paul R]

Hi,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[Author]

Posts