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

  • This topic has 0 replies, 1 voice, and was last updated 6 years ago by  Support. This post has been viewed 12672 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)