How to use different logo sizes for different resolutions

[Support]

If you want to use different logos size for different resolutions please follow the instructions.

Open the HTML file and on the logo part you must add IMGs with different classes:

<a href="index.html">
	<img class="logo-default" alt="Porto" width="222" height="108" data-sticky-width="82" data-sticky-height="40" data-sticky-top="33" src="img/logo.png">
	<img class="logo-small" alt="Porto" width="111" height="54" src="img/logo-small.png">
</a>

(Please note the classes: logo-default, logo-small)

Now you must add breakpoints on the CSS (css/custom.css):

@media (min-width: 992px) {
	.logo-default {
		display: block !important;
	}
	.logo-small {
		display: none !important;
	}
}

@media (max-width: 991px) {
	.logo-default {
		display: none !important;
	}
	.logo-small {
		display: block;
		width: 111px !important;
		height: 54px !important;
	}

	#header .header-logo {
		width: auto !important;
		height: auto !important;
	}
}

You can add more formats if you want.

(Note that the small logo size is fixed in 111×54 in the css, you need to set those values to match your logo size)

---

[Author]

Posts