[Resolved] How to change the header height to make logo appear bigger on mobile

Home Forums Support How to change the header height to make logo appear bigger on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1325764
    Janani

    Dear Team

    To make the logo appear bigger on mobile, I changed the menu height to 100px. The logo looks good now, but the menu dropdown does not look good as there is lot of space between the menu items. If I reduce the menu height, then the menu looks good, but the logo becomes small. I tried adjusting the header padding as well, but the logo size sill does not increase. How do I make the logo bigger without disturbing the menu?

    #1325853
    Leo
    Staff
    Customer Support

    Hi there,

    Try adding this CSS:

    @media (max-width: 768px) {
        .main-navigation .main-nav ul li a {
            line-height: 30px;
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know if this helps 🙂

    #1325953
    Janani

    Dear Leo,

    No, unfortunately it doesnt work. I have reduced the menu height to 60px now, and the logo remains small.

    Warm regards,

    #1326116
    David
    Staff
    Customer Support

    Hi there,

    try this CSS to increase just the logo size:

    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 80px;
    }

    You may want to also increase the menu item height to give it more space for a larger logo.
    If not i would suggest a different logo for mobile that is more legible when small.

    #1326896
    Janani

    Dear David,

    Perfect. Thank you very much!

    Warm regards,

    #1327249
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.