[Resolved] How to center logo on mobile?

[Mike]

I’m trying to get my header (for mobile only) to appear exactly like it as on the mobile version of this site: https://nypost.com . Drop down on the left, logo centered, and search on the right.

Whats the easiest way to achieve this?

Thank you!

[David]

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;
}

[Mike]

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?

[Leo]

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

Thanks 🙂

[Mike]

Sure thing.

[Leo]

Thanks 🙂

[acela]

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.

[Leo]

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

Thanks 🙂

[Author]

Posts