Archived topic
Mobile Logo Resize
3 replies · Started by Gerson on June 3, 2019
Viewing posts 1–4 of 4
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?
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;
}
}Thank you!
You're welcome
This archived topic is closed to new replies.
