[Support request] Getting my logo to the center on mobile/Desktop

[Heath]

For some reason I can’t figure out how to get my logo to be center on desktop and mobile.

I’d like for the logo to be in the center with the menu icon on the right and the search icon on the left.

[Fernando]

Hi Heath,

You have too many menu items for such a layout. Would you be open to having a hamburger button for the menu on all views?

[Heath]

Yes I would be ok with that.

[Fernando]

If that’s the case, can you set the Mobile Menu Breakpoint to 2000 or type a really high value in Appearance > Customize > Layout > Primary Navigation?

Reference: https://docs.generatepress.com/article/primary-navigation-layout-overview/

We’ll then proceed with the next step afterward.

[Heath]

I’ve updated the mobile breakpoint

[Fernando]

Great.

Can you try adding this through Appearance > Customize > Additional CSS?:

.inside-header.grid-container .site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

nav#mobile-menu-control-wrapper {
    margin-left: 0;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
}

nav#mobile-menu-control-wrapper .menu-toggle{
    margin-left: auto;
    flex-grow:0;
}

[Author]

Posts