How to Center Logo on Mobile

Hi there,

You can try adding this CSS:

.site-logo.mobile-header-logo  {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); 
}
#mobile-header .menu-toggle {
    order: -1;
    margin-right: auto;
}

Hey, thanks! That worked well... The only thing is that the logo doesn't seem quite center-aligned on mobile. Or am I wrong?
Also, what's the best way to add padding to the left and right sides of the mobile header, so that it's closer to the main container padding? Something like this?

#mobile-header {
	padding: 0px 10px;
}

As far as I can tell, there are no mobile header padding options in the customizer.

I appreciate the help!

The only thing is that the logo doesn’t seem quite center-aligned on mobile. Or am I wrong?

Ah yes, That's from the margin-left: 10px; being added to .site-logo.mobile-header-logo

We can add margin-left: 0px !important; to the .site-logo.mobile-header-logo to address this.

Also, what’s the best way to add padding to the left and right sides of the mobile header, so that it’s closer to the main container padding? Something like this?

That works. This works as well too. :)

#mobile-header .inside-navigation {
    padding: 0 10px;
}

Awesome! Thanks

No problem. :)

Hi,

I implemented this code on my site, but nothing seemed to have happened.

What could I missing?

Thanks!

Hi Kwame,

This CSS won't work if you are not using mobile header which can be activated at customizer > layout > header.

If after activating mobile header, it still doesn't work, can you open a new topic and link us to your site?

Let me know :)