Archived topic
Keep mobile header logo same size as non-mobile
4 replies · Started by Oliver on June 12, 2016
Hi,
the mobile header logo displays smaller than the logo on the non-mobile site (I'm using the same height image for both). Is there a way to make the mobile header have less spacing and display at the same size the regular logo does?
Alternatively, what CSS can I use to floating the mobile menu on the right? I was only using the 'mobile header' option because I couldn't manually get a float right menu. I can get the logo and site title to line up fine without needing to use the mobile header option, it's just the menu that trips me up.
- Ollie.
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;
}
}Awesome, thanks for sharing the code :)
Where do you place this code to make the changes? Cheers
This should help: https://generatepress.com/knowledgebase/adding-css/