Home Forums Porto Template FAQ’s How to use different logo sizes for different resolutions

This topic contains 0 replies, has 1 voice, and was last updated by  Support 5 years ago. This post has been viewed 10012 times

Viewing 1 post (of 1 total)
  • Author
    Posts
  • #1446

    Support
    Keymaster

    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)


Viewing 1 post (of 1 total)