Archived topic
flexbox mobile header - centering logo
3 replies · Started by Are Martin on March 29, 2018
Viewing posts 1–4 of 4
Hi Tom! After the latest update the mobile header is using flexbox. The old way of centering then logo as described in the docs is therefor not working properly anymore. I tried tweaking the css by changing the flexbox order number and then added the code for the logo centering from the docs. It seems like it´s getting the job done. Is this a good way of doing it, or is there a better way?
#mobile-header .site-logo {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 4;
order: 4;
margin-right: auto;
position: absolute;
left: calc( 50% - 65.66px);
}Any chance you can link me to your site? Might be able to ditch the position and left values.
Since you have nothing on the right, the way you're doing it is best.
If there was an element on the right, you could just do this:
#mobile-header .site-logo {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 4;
margin-right: auto;
margin-left: auto;
}
This archived topic is closed to new replies.
