Reply To: Keep mobile header logo same size as non-mobile

Home Forums Support Keep mobile header logo same size as non-mobile Reply To: Keep mobile header logo same size as non-mobile

Home Forums Support Keep mobile header logo same size as non-mobile Reply To: Keep mobile header logo same size as non-mobile

#201376
Oliver

Never mind, I managed to find a solution. I used a CSS flexbox and the margin-right:auto property to push the menu to the right.

Here’s the CSS I used:

@media screen and (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;
        margin-bottom: -19px;
 	}
    
	.site-branding {
		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		-ms-flex-order: 2;
		-webkit-order: 2;
		order: 2;
        margin-right: auto;
	}
    
	.site-logo {
		-webkit-box-ordinal-group: 1;  
		-moz-box-ordinal-group: 1;     
		-ms-flex-order: 1;     
		-webkit-order: 1;  
		order: 1;
	}

	.main-navigation {
		-webkit-box-ordinal-group: 3;
		-moz-box-ordinal-group: 3;
		-ms-flex-order: 3;
		-webkit-order: 3;
		order: 3;
	}
}