Centering Your Logo in the Mobile Header

If you’re using the Mobile Header option along with a logo and search icon, you might want to change the layout a bit and place your mobile header logo in the center, and your mobile menu button on the left.

We can do this using a small snippet of CSS:

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

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

The only part you need to tweak is the 90px. Adjust that value to exactly half the width of your mobile header logo.