[Resolved] Keep mobile header logo same size as non-mobile

Home Forums Support [Resolved] Keep mobile header logo same size as non-mobile

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #201370
    Oliver

    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.

    #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;
    	}
    }
    #201438
    Tom
    Lead Developer
    Lead Developer

    Awesome, thanks for sharing the code 🙂

    #205316
    David

    Where do you place this code to make the changes? Cheers

    #205407
    Tom
    Lead Developer
    Lead Developer
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.