[Resolved] Documentation request – logo size

Home Forums Support Documentation request – logo size

This topic contains 11 replies, has 3 voices, and was last updated by  David 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1268790

    Duncan

    Hi,

    Absolutely love the theme/plugin – have tried many themes in the past, but this one just ‘clicks’ with me, and I use it to develop all of my websites. This is definitely not a criticism, but a respectful request.

    One thing that always trips me up every time I do a new site is defining the logo size. I know that the menu height controls the logo size, but sometimes I want to control the menu height and logo size separately. And every time I do this, I have to go searching for the correct ids or classes to modify with some custom css. This bit is always a bit of a sticking point, because I need to account for the different headers (standard, navigation, sticky and mobile). And sometimes I end up using some top margin to make my menu centered with the logo, which doesn’t feel ‘right’.

    I would love to have a control in the customizer that allows me to adjust the size of the logo independently of the menu height. But, failing this, would it be possible to have some comprehensive documentation on how to do this with css, taking into account the 4 different headers: standard, navigation, sticky and mobile.

    If I’ve missed an existing method or the penny just hasn’t dropped for me, then I’d be grateful if you could point me in the right direction.

    Thanks

    #1269171

    Leo Customer Support

    Hi there,

    I know that the menu height controls the logo size

    This is only the case when the navigation as a header is used:
    https://docs.generatepress.com/article/navigation-as-a-header/

    If you are using the default header, then the logo size can be controlled in the customizer:
    https://docs.generatepress.com/article/adding-header-logo/

    Can you link me to the site in question if this doesn’t help?

    #1269455

    Duncan

    Hi Leo,

    Thanks for the reply. I didn’t know that the menu line height only controls the logo size in the navigation header, so thanks for the info.

    However, if I use the default header and set the logo to the required size and menu to the required height, then the menu is not vertically centered: https://snipboard.io/yZ8N0T.jpg

    Alternatively, if I use the navigation header then the only way to get the required logo size is to set a high value for the menu height: https://snipboard.io/e2aAbT.jpg

    I would like to have the menu vertically centered with the logo, but with a smaller height than the logo.

    This is why I would like to be able to set the menu height and logo size independently. I’ve shared my site url, but some definitive documentation on achieving this would be really useful.

    Thanks

    #1269463

    Leo Customer Support

    Your site is under the coming soon page.

    Can you disable it?

    #1269492

    Duncan

    Oops, sorry about that. Disabled the coming soon page now.

    Thanks

    #1269498

    Leo Customer Support

    So when the navigation as a header is activated, there is a default 10px top and bottom padding added to the logo image:
    https://www.screencast.com/t/PFbKpAzjfe

    In another word, the logo height would be 20px less than the menu item height set in the customizer:
    https://docs.generatepress.com/article/menu-item-height-width/

    If you want the logo height to be the exact same height as the menu item height, then you can use this CSS to remove the padding:

    .navigation-branding img, .site-logo.mobile-header-logo img {
        padding: 0;
    }

    If you want the reduce the logo height while keeping the menu item height, then the top and bottom paddings needs to be increased like this:

    .navigation-branding img, .site-logo.mobile-header-logo img {
        padding: 20px 0;
    }

    Let me know if this makes sense.

    #1270017

    Duncan

    Hi Leo,

    Thanks for your reply. What you have posted does make sense, but I want achieve the opposite – I would like to keep the logo the size that it is at the moment, but reduce the menu height, wile also keeping the menu vertically centered with the logo.

    Hope that makes sense.

    Thanks

    #1270319

    David Customer Support

    Hi there,

    in that case add this CSS:

    .navigation-branding img, 
    .site-logo.mobile-header-logo img {
        height: 130px;
    }

    This will look in the logo size – now you can change the menu item height as you please.

    #1270489

    Duncan

    Hi David,

    That’s great, just what I was after thank you. Circling back to my original question, would it be possible for you guys to add this to your documentation? I think that this would be a really useful resource.

    So if it can’t be added as an option in the customizer, could you document the css needed to target the logo in each of the default, navigation, sticky and mobile headers?

    Thanks

    #1270518

    David Customer Support

    Yeah – i think we can review the docs on this one 🙂 Thanks for the suggestion .

    #1271141

    Duncan

    Awesome, thanks David!

    #1273419

    David Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.