[Resolved] Mobile Logo Resize

Home Forums Support Mobile Logo Resize

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #919122
    Gerson

    Hi, I’m using this code to display the site logo in an overlapping fashion:

    .main-navigation .site-logo.navigation-logo {
        position: absolute;
        left: 0;
        top: 0;
    }
    .main-navigation {
    	margin-top: 0;
    	padding: 0px;
    }
    
    .main-navigation .navigation-logo img {
    	padding: 0px 0px 10px 30px;
    	margin-top: 0px;
    }
    .main-navigation .navigation-logo img {
        height: 130px;
    }
    .main-navigation:not(.navigation-stick) {
        position: relative;
        z-index: 99;
    }
    .navigation-branding img, 
    .mobile-header-logo.site-logo img, 
    .main-navigation.sticky-navigation-transition .navigation-branding img {
        padding: 0;
        position: absolute;
        top: 0;
        height: 170px;
    }

    But the mobile version of the logo looks too large – how can I reduce the size of the mobile logo?

    #919284
    David
    Staff
    Customer Support

    Hi there

    we can use a media query to target the logo on the smaller devices like so:

    @media (max-width: 768px) {
        .navigation-branding img.header-image {
            height: 100px;
        }
    }
    #919340
    Gerson

    Thank you!

    #919359
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.