Reply To: Replace Logo Image on Scroll (and a few other small issues)

Written by on

› › › › ›

#22983
Daniel Tara
Keymaster

The simplest way to achieve this is to use a custom CSS hack. Go to Appearance → Design → Custom CSS and enter the following:

@media (min-width: 992px) {
	.navbar-brand {
		background-image: url(/path/to/image.png);
		background-position: 15px 14px;
		background-repeat: no-repeat;
		background-size: auto 32px;
	}

	.navbar-large .navbar-brand {
		background: none;
	}

	.navbar-brand > .site-logo {
		opacity: 0;
	}

	.navbar-large .site-logo {
		opacity: 1;
	}
}

The only thing you need to change in the code above is replace the /path/to/image.png with the real path to your logo. Because of the previous changes you made to your theme you may run into issues which unfortunately cannot be debugged unless you share a link to your website.