[Resolved] Mobile Header: Vertically stacking the logo and hamburger

[Tony]

First off, thanks for providing a great support forum. I’m brand new to GP, however have been creating child themes for Genesis Framework for years. I figured Gutenberg and the block era was the perfect time to try something new. So far, so good…until it comes time to wrapping my head around the various switches and toggles that interconnect the layout, header, and menus, especially when bringing mobile into play.

What I’m shooting for is a logo and mobile menu that vertically stacks, rather than positions horizontally. I can CSS it into what I want via Chrome’s DevTools, but can’t get it to function for production. In production, the closes I get is the hamburger hiding behind the logo.

This is going to fall under 100% user error until I get my proverbial sea legs, but I’d also love to avoid pulling any more hair out, so any insight you could provide would be great. In looking through the support archives, I’ve found some similar fixes, but they don’t seem to work for the Java child. Thanks for any assistance!

I’ve created a directory login for you:
L: generate
P: press2020

[Leo]

Hi there,

Can you try disabling the mobile header option and just the normal header?
https://docs.generatepress.com/article/mobile-header/

Then it should be stacked by default.

Let me know 🙂

[Tony]

That goes get me closer. I can adjust nav menu item spacing and font sizes from there, so that it doesn’t overrun the content. At a quick glance, the menu items go horizontal and run off the screen, so I can dig into that, as well.

[Leo]

So is the issue all resolved?

I’m still seeing the mobile header option activated in your site.

Just want to make sure 🙂

[Tony]

My apologies for the delay, Leo. A family thing popped up and I got pulled away.

Dove back in today and the subdomain I sent you is now staging2 instead of staging1.

I’ve turned off the mobile header, although everything is stacking and the menu runs off the screen.

And the mobile hamburger menu icon is still showing, so I’m guessing there’s a switch somewhere to disable that (at least one that’s not related to turning off the mobile header).

[Leo]

Can you edit the original topic and update the URL field to what I should be looking at now?

[Tony]

Updated, Leo. You may get hit with a second challenge after a partial load. It’s just the same credentials.

[Leo]

That’s super strange.

Can you temporarily comment out the custom CSS in Additional CSS and let me have a cleaner look?

Also did you change the mobile menu breakpoint?
https://docs.generatepress.com/article/mobile-navigation/#using-gp-premium

[Tony]

I killed the custom code. That also takes out the CSS for the centered logo (via your tutorial), but that’s evident by the menu item of “Menu Item Separator”.

I think if I use the off-canvas menu, that will make things easier. And then figuring out why the header is duplicating the hero image and I should be set. Theoretically… 🙂

[Leo]

Sorry I kind of lost track of the issue.

I remember that the menu wasn’t switching to the toggle on mobile.

Was it caused by this CSS here?
https://docs.generatepress.com/article/centering-logo-navigation/

[Tony]

“Sorry I kind of lost track of the issue.”

Ha! That’s two of us. I think we both did that as I get my bearings with the various, interrelated locations/switches for changes (layout, menu, header, etc).

Let’s go ahead and close this out and I’ll open a fresh support thread if I can’t dig my way out. Much appreciated, Leo. Cheers

[Leo]

Sounds good 🙂

[Author]

Posts