[Resolved] Center site logo in mobile and move logo over header widget in mobile

[Suzanne]

Hi,
I’ve got my header set up and it looks great in the desktop version. I want to know how to make it look great in the mobile version too.

Desktop format is left aligned site logo, right aligned header widget. http://tinyurl.com/zeo94jd

When viewed in the mobile version I’d like the site logo to be centered like the header widget and stacked on top of the header widget. This is how it looks mobile version: http://tinyurl.com/jymz9hf

This is a mockup of how I’d like it to look: http://tinyurl.com/zwa3dh8

How can I do this?

[Tom]

Hi there,

Try this CSS:

@media (max-width: 768px) {
	.inside-header {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
 	}
    
	.site-branding {
		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		-ms-flex-order: 1;
		-webkit-order: 1;
		order: 1;
	}
    
	.site-logo {
		-webkit-box-ordinal-group: 2;  
		-moz-box-ordinal-group: 2;     
		-ms-flex-order: 2;     
		-webkit-order: 2;  
		order: 2;
	}

	.header-widget {
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
	}
}

Let me know 🙂

• This reply was modified 10 years, 2 months ago by Tom.
• This reply was modified 10 years ago by Tom.

[Suzanne]

Thank you!

In mobile, the logo is over the header widget which what I wanted, however now both site logo and header widget are floating left, not center. http://tinyurl.com/zqdsbmf

[Tom]

I’ve adjust my code above to fix that 🙂

[Suzanne]

Unfortunately it didn’t center it. Does something need to be cleared first?

[Tom]

I’m not seeing the extra bit of CSS I added when looking at your code. Did you delete the original block and add the above?

[Suzanne]

What the heck! I recopied it and now it is working. THank you, and sorry for that.

[Tom]

No worries! Glad I could help 🙂

[Daniel]

Hi Tom,

I tried the code you placed above but my logo is now floating right in mobile.

What can I do?

Thanks,

Daniel

[Tom]

Hi Daniel,

Can you try the updated code above?: https://generatepress.com/forums/topic/center-site-logo-in-mobile-and-move-logo-over-header-widget-in-mobile/#post-164569

[Jamal]

Hi,

Im having a similar problem i cant get to center header widgets after applying the above code,help please. Its the site you helped me with yesterday.

[Tom]

Can you link me to the page where it’s not centering?

[Author]

Posts