[Resolved] Mobile Menu Header/Logo

Home Forums Support Mobile Menu Header/Logo

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #261963
    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

    #262043
    Tom
    Lead Developer
    Lead Developer

    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.

    #262264
    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.

    #262371
    Leo
    Staff
    Customer Support

    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.

    #262442
    Tom
    Lead Developer
    Lead Developer

    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.

    #262785
    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.

    #262810
    Tom
    Lead Developer
    Lead Developer

    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.

    #263090
    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?

    #263143
    Leo
    Staff
    Customer Support

    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?

    #263184
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #263771
    John

    Perfect, Tom. That did it. Thank you!

    #263773
    John

    Resolved

    #263794
    Tom
    Lead Developer
    Lead Developer
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.