[Support request] Center Mobile Logo

[Tim]

I’d like to center the mobile logo and have the hamburger menu above by the logo. I’ve tried doing this from recent forums but that code sin’t working.

[Leo]

Hi Tim,

I’d like to center the mobile logo and have the hamburger menu above by the logo.

What about the phone number button?

It doesn’t look like there is enough space for the phone number, logo and menu toggle to be in one line.

[Tim]

I’d like the logo left, then hamburger menu to the right of that then the button centered under both of them.

[Leo]

Hmm this would be a bit tricky.

Can you activate the mobile header option and upload a logo there first?
https://docs.generatepress.com/article/mobile-header/

[Tim]

Logo Centered. Button centered under. then hamburger centered under that would work too if that’s easier.

[Leo]

Can you try this CSS first?

@media (max-width: 768px) {
    .main-navigation.has-branding:not(.grid-container) .inside-navigation:not(.grid-container) .navigation-branding {
        margin-left: auto;
    }
    .main-navigation .menu-bar-items {
        width: 100%;
        justify-content: center;
    }
    .main-navigation.has-branding .menu-toggle {
        margin-left: auto;
        margin-right: auto;
    }
}

[Tim]

Doesn’t quite work. take a look.

[Leo]

Added some more code here:
https://generatepress.com/forums/topic/center-mobile-logo-2/#post-2511619

Can you try it again?

Let me know 🙂

[Tim]

Hmm.. THat did what I wanted but didn’t look great.

Can I get that call button in the slide out menu. Then have the logo and the hambuger to the right of the logo? Can we remove “Menu” so it’s just the 3 lines?

[Leo]

Let’s take care of one thing at a time.

Can I get that call button in the slide out menu.

You can add it again in the off canvas widget area:
https://docs.generatepress.com/article/off-canvas-panel-overview/#off-canvas-panel-widget-area

As for hiding the current phone number button on mobile, do you have GB pro by any chance?

Let me know 🙂

[Author]

Posts