Archived topic
Mobile header display
5 replies · Started by Geoff on June 12, 2020
Hello,
I've used this CSS in the past to display a mobile header image larger:
#mobile-header .site-logo {
margin-left: auto;
margin-right: auto;
}
.mobile-header-logo #mobile-header .menu-toggle {
width: 100%;
}
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: auto;
}
This time around, the hamburger menu isn't below the logo and the whole square logo isn't displaying. I've deleted the cache and remove extra themes in case there's a conflict. No luck.
Thank you,
Geoff
Hi there,
Not sure if I fully understand.
What is the result you are trying to achieve?
Logo on top and menu toggle below it?
Yes, like these two examples with the same template and css --
Wouldn't that just be the default header?
https://docs.generatepress.com/article/mobile-header/
Can you try turning off the mobile header?
As is the case with the examples I sent, it's a different image for mobile. Here's what it looks like with the mobile header turned off:
Ok so basically you want to use a different logo on mobile without the mobile header layout?
That case can you first remove the previous CSS you've added and increase the menu item height on mobile a bit?
https://docs.generatepress.com/article/menu-item-height-width/
