-
Hi!
I am creating a web site using the fantastic GPP (newest version) and would like to show a smaller header image on mobile, without using the mobile header because then the header image is too small. What is the best option in this case? The URL is in the private info below.
Thank you for your help,
Eva -
Hi there,
The best option would be to use the mobile header option and we can use some CSS for some fine tuning if needed.
Can you activate the option and upload a logo first?
https://docs.generatepress.com/article/mobile-header/Thanks!
-
Hi Leo,
Thank you for your fast reply. I have activated the mobile header and uploaded the header.
-
Can you try to increase the menu item height with the mobile toggle on to see if you can make it work?
https://docs.generatepress.com/article/menu-item-height-width/Let me know if you prefer to have the menu item height different from the mobile header height 🙂
-
That works 🙂
Now I do would like to have the menu item height different from the mobile header height and if possible, a bit more space on the left side of the mobile header.
Thank you!! -
Hi there,
adjust your menu item height.
Then add this CSS to set the height of the logo and put some space to the left side of it:.mobile-header-navigation .site-logo.mobile-header-logo img { height: 70px; margin-left: 10px; } -
Thank you, David, that works just fine 🙂
Just one more thing: is there a way to reduce the white space between the menu items on mobile, or can this only be defined with the height (70px)?
Thanks again! -
Reduce the menu Height. It will only affect the menu items now with that CSS in place
-
Hi David,
I have tried this, but it doesn’t work…Any idea?Thank you!
-
Hmmm… replace the CSS i provided with:
.mobile-header-navigation .site-logo, .mobile-header-navigation .site-logo.mobile-header-logo img { height: 70px !important; } -
Thank you so much, David. Now it works just fine. Problem solved 🙂
-
Glad to hear that!
- You must be logged in to reply to this topic.