How to center logo on mobile?

Hi there,

try adding this CSS to the site:

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

Thank you!

I have another question: How can I make the header stand out from my content a little more? The background for the header is currently an off-white color, which makes it hard to differentiate the header from my content (which has a solid white background color). I tried playing around with the colors, but couldn't find anything appropriate other than off-white, so I thought about using a custom image as a background.

How could I implement this, and what should the dimensions of the image be?

Any chance you can open a new topic for your question?

Thanks :)

Sure thing.

Thanks :)

Thanks. My SVG logo was a little off-center with the CSS above... A slight tweak and it worked a bit better for me:

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

(This was after removing the hamburger "Menu" text.)

Just wanted to share.

Can you open a new topic for your question and link us to the page in question?

Thanks :)