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

[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?

[Leo]

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 🙂

[Janani]

Dear Leo,

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

Warm regards,

[David]

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.

[Janani]

Dear David,

Perfect. Thank you very much!

Warm regards,

[David]

You’re welcome

[Author]

Posts