[Support request] Mobile header display

[Geoff]

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

[Leo]

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?

[Geoff]

Yes, like these two examples with the same template and css —

[Leo]

Wouldn’t that just be the default header?
https://docs.generatepress.com/article/mobile-header/

Can you try turning off the mobile header?

[Geoff]

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:

[Leo]

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/

[Author]

Posts