[Resolved] Mobile Logo Resize

[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?

[David]

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;
    }
}

[Gerson]

Thank you!

[David]

You’re welcome

[Author]

Posts