[Resolved] Mobile header logo: optimal size?

[generatepressiscool]

What should the size be of the mobile header logo?

Everytime I add a logo it seems to get shrinked. Even if I add something that’s 1024×1024 in size, it will get shrinked again. Why is this?

Optimal size for mobile header logo both when using a square or rectangle = ?

[Tom]

The navigation logo/mobile header logo will be resized to fit in your navigation/mobile header.

So if your mobile header is 60px in height, the logo will be resized to 40px in height to allow for 10px padding on top and bottom of the logo.

You can overwrite this with some CSS:

/* Navigation logo */
.main-navigation .sticky-logo, 
.main-navigation .sticky-logo img {
    height: 40px;
}

/* Mobile header */
.mobile-header-navigation .mobile-header-logo, 
.mobile-header-navigation .mobile-header-logo img {
    height: 40px;
}

Hope this helps 🙂

[generatepressiscool]

Okay that works. But it seems the logo gets aligned vertically at the bottom. How to put it centered?

[Tom]

It has 10px of margin on top which you can adjust with CSS:

.sticky-menu-logo .main-navigation.navigation-clone .sticky-logo {
    margin-top: 10px;
}

[generatepressiscool]

Didn’t work, but this did

/* Mobile header */
.mobile-header-navigation .mobile-header-logo, 
.mobile-header-navigation .mobile-header-logo img {
    height: 15px;
    padding-top:4px;
}

The other code doesn’t seem necessary?

/* Navigation logo */
.main-navigation .sticky-logo, 
.main-navigation .sticky-logo img {
    height: 40px;
}

[Tom]

The other code is only if you want to adjust the navigation logo as well.

Glad you found a solution 🙂

[Yannick]

I’m trying as well to change the size of my mobile logo independent on the size of my navigation logo.

/* Navigation logo */
.main-navigation .sticky-logo, 
.main-navigation .sticky-logo img {
    height: 60px;
    margin-left: 20px;
    margin-top: 5px;
}

/* Mobile header */
.mobile-header-navigation .mobile-header-logo, 
.mobile-header-navigation .mobile-header-logo img {
    height: 40px !important;
}

the logo size on smartphone or tablet always keeps the 60 px from the navigation logo?

best wishes
Yannick

[Tom]

No, the 40px you have set there should apply to your mobile header logo as long as you’re using the mobile header option in “Customize > Layout > Header”.

[Yannick]

Thank you!! 🙂

[Tom]

No problem 🙂

[Matthias]

I’m trying to change the size of my mobile header logo and used those examples but there is no change. I’m using the mobile header option.
My website http://www.kiwisuisse.ch

[David]

Hi there,

this is a really old topic, try this instead:

@media (max-width: 768px) {
    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 50px;
    }
}

[Matthias]

I have tried this but still to no effect. Any idea why?

[David]

I edited the code above to include it within the media query

[Matthias]

I updated the code, but still no change. Have you checked out my page?

[Author]

Posts