Archived topic

Center Logo

7 replies · Started by Andy on July 21, 2019

Viewing posts 1–8 of 8

July 21, 2019 at 3:14 pm #963665

Hi,
I’m using the Navigation as Header option and want to center the logo on mobile. This sounds simple on paper but because it’s now using flexbox i’m unsure what CSS to use.

Any help much appreciated.
Thx!

July 21, 2019 at 4:16 pm #963699

Hi there,

Maybe this will help?: https://docs.generatepress.com/article/centering-logo-navigation/#using-the-navigation-as-a-header

Let me know :)

July 27, 2019 at 5:19 am #968459

Thanks Tom, it seems I only needed this bit of code from the guide:

.site-branding,
.site-logo {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 200;
}

But I want the toggle to stay on the right not the left?.

July 27, 2019 at 7:27 pm #968929

Is that code active right now? I'm not seeing it on the site you shared.

Let me know :)

July 28, 2019 at 5:06 am #969090

Sorry I was testing it locally first. I've now added it to the live site from 600px and below.

July 28, 2019 at 7:00 am #969176

Try this CSS:

#mobile-header .menu-toggle {
    margin-left: auto;
}

July 28, 2019 at 7:45 am #969209

Thanks didn't realise it would be that simple, also needed to add:

.navigation-branding, .site-logo.mobile-header-logo { margin-left:0; }

July 28, 2019 at 6:58 pm #969644

No problem - glad you got it working :)

This archived topic is closed to new replies.

Start building better websites today.