Archived topic
How to change the header height to make logo appear bigger on mobile
5 replies · Started by Janani on June 12, 2020
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?
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 :)
Dear Leo,
No, unfortunately it doesnt work. I have reduced the menu height to 60px now, and the logo remains small.
Warm regards,
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.
Dear David,
Perfect. Thank you very much!
Warm regards,
You're welcome
