- This topic has 11 replies, 4 voices, and was last updated 7 years, 11 months ago by Tom.
-
AuthorPosts
-
January 9, 2016 at 9:50 am #164550Suzanne
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 #164569TomLead DeveloperLead DeveloperHi 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 8 years, 3 months ago by Tom.
- This reply was modified 8 years ago by Tom.
January 9, 2016 at 12:46 pm #164617SuzanneThank 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 #164670TomLead DeveloperLead DeveloperI’ve adjust my code above to fix that π
January 10, 2016 at 5:51 am #164735SuzanneUnfortunately it didn’t center it. Does something need to be cleared first?
January 10, 2016 at 11:21 am #164847TomLead DeveloperLead DeveloperI’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 #164875SuzanneWhat the heck! I recopied it and now it is working. THank you, and sorry for that.
January 10, 2016 at 12:40 pm #164876TomLead DeveloperLead DeveloperNo worries! Glad I could help π
March 24, 2016 at 10:07 am #181332DanielHi 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 #181352TomLead DeveloperLead DeveloperHi 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 #193833JamalHi,
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 #193892TomLead DeveloperLead DeveloperCan you link me to the page where it’s not centering?
-
AuthorPosts
- You must be logged in to reply to this topic.