Centering Your Logo in the Mobile Header

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.

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注