Archived topic

Center site logo in mobile and move logo over header widget in mobile

11 replies · Started by Suzanne on January 9, 2016

Viewing posts 1–12 of 12

January 9, 2016 at 9:50 am #164550

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?

January 9, 2016 at 10:59 am #164569

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 :)

January 9, 2016 at 12:46 pm #164617

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

January 9, 2016 at 11:47 pm #164670

I've adjust my code above to fix that :)

January 10, 2016 at 5:51 am #164735

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

January 10, 2016 at 11:21 am #164847

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?

January 10, 2016 at 12:39 pm #164875

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

January 10, 2016 at 12:40 pm #164876

No worries! Glad I could help :)

March 24, 2016 at 10:07 am #181332

Hi Tom,

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

What can I do?

Thanks,

Daniel

March 24, 2016 at 10:54 am #181352

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

May 12, 2016 at 12:01 pm #193833

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.

May 12, 2016 at 9:23 pm #193892

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

This archived topic is closed to new replies.

Start building better websites today.