Mobile Header Order: Search (left), Logo (center), Menu (right)

[Alex Wideman]

Hi,

I’m looking to center the logo in my mobile header only, have the search on the left and menu on the right.

The closes I’ve gotten is using the following code from https://docs.generatepress.com/article/centering-logo-mobile-header/

#mobile-header .site-logo {
    position: absolute;
    left: calc( 50% - 131px); /* 50% from the left - half your image width */
}

#mobile-header button.menu-toggle {
    position: absolute;
    left: 0;
}

#mobile-header .mobile-bar-items {
    margin-left: auto !important;
}

But the search/menu still need to be swapped and the logo isn’t won’t fit between them.

I’ve tried a number of the “center mobile header” solutions on these forums, but none seem to work – though I realize that this ordering goes against the grain.

I am using Navigation as Header, Mobile Header is On and sticky header is off.

Any direction you are able to provide would be appreciated.

Thanks,

Alex

[David]

Hi there,

try this CSS instead:

#mobile-header {
    position: relative;
}

#mobile-header .site-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translatex(-50%);
    margin-left: 0;
}

#mobile-header .mobile-bar-items {
    margin-right: auto !important;
}
.site-logo.mobile-header-logo img {
    height: auto !important;
    max-height: 60px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex Wideman]

Works perfectly, thank you kindly David!

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts