Home Forums Porto Template Help with logo in header

This topic contains 1 reply, has 2 voices, and was last updated by  Support 5 months, 1 week ago. This post has been viewed 182 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10025963

    tkimpo
    Participant

    I need to be able to switch to a smaller simpler version of our logo for the mobile view. The regular logo + company name is too long – and pushes the sight drop down nav out of site. How can I have the header make a switch when resized to mobile view to display the logo only?


    #10025966

    Support
    Keymaster

    Hello, sure, you can use different logos and links for desktop and mobile resolutions.

    Here’s an example:

    HTML:

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

    (css/custom.css)

    .logo-desktop {
    	display: block;
    }
    
    .logo-mobile {
    	display: none;
    }
    
    @media (max-width: 991px) {
    	.logo-desktop {
    		display: none;
    	}
    
    	.logo-mobile {
    		display: block;
    	}
    }

    Note that the second image can be different.

    Kind Regards,

    Jonas


Viewing 2 posts - 1 through 2 (of 2 total)