[Resolved] Mobile Menu Header/Logo

[John]

Hey all,

On mobile, I want the logo of my site to appear on the left, with the nav bar on the right. When I don’t enable a mobile header, the logo appears on top. When I do enable it, and add a separate logo, it works but the logo on the left is crazy small. I know there’s been a bunch of topics on this and I’ve used the css but I haven’t found anything that resolved it. I’d like to have the mobile header enabled if it makes any difference. Any suggestions?

Thanks!

John

[Tom]

Hi John,

With the mobile header enabled, how much space do you have for your logo?

GP takes the height of your mobile header, and makes sure the logo fits inside of it.

In most cases, you want your mobile header/navigation logo to be a simplified version of your desktop logo. Maybe the initials, or just the icon/design.

[John]

Hey Tom,

The site is squatsandcereal.com. You can see how the logo looks there from mobile. I also have a logo that just says S&C but that one appears even smaller when I use it.

[Leo]

Hi John,

What’s the shape of that S&C logo? Mobile header logo would work the best if the image is square-ish.

For example, I think it would look slick if you use just that bench press icon in your full logo as the mobile header logo.

[Tom]

Since your mobile header is so narrow, there’s really not enough room to fit that much text.

I think Leo had a great idea about using the bench press icon as your mobile header – that way you won’t be trying to squeeze such a big header into a tiny area.

[John]

The S&C logo is pretty square. I’m not really sure why the mobile menu is so narrow. I’m assuming it’s because of the padding and margins of of making the regular menu a little thinner. I’ll try just the squat rack icon and keep playing around with it. Thanks guys.

[Tom]

It’s because the logo is a rectangle, and your mobile header isn’t very tall at all.

You can remove some of the top spacing like this:

.mobile-header-navigation .mobile-header-logo {
    padding-top: 2px;
}

However, the mobile header logo isn’t meant for headers with text – there’s just not enough room height-wise.

[John]

Hey guys,

I tried the CSS and using only the squat icon, along with other square logos. Nothing seemed to do the trick. Tom, the CSS you suggested alters the menu height, but the logo stays the same. Is there a set amount of pixels or size I should be shooting for here?

[Leo]

What is the current dimension of the logo you are uploading? For me I upload a 300×300 icon as mobile header and it gets scale down to 40×40 and looks good. So I would say try uploading something thats minimum of 40×40?

[Tom]

Increasing the height of your mobile header definitely wouldn’t hurt:

#mobile-header .main-nav ul li a, 
#mobile-header .menu-toggle, 
#mobile-header .mobile-bar-items a {
    line-height: 60px;
}

.mobile-header-navigation .mobile-header-logo, 
.mobile-header-navigation .mobile-header-logo img {
    height: 30px;
    padding-top: 10px;
}

[John]

Perfect, Tom. That did it. Thank you!

[John]

Resolved

[Tom]

No problem 🙂

[Author]

Posts