Archived topic
Mobile Logo Size and Placing navigation to right of Logo
5 replies · Started by Gabriel on July 31, 2019
I am struggling with figuring out how to adjust the size of my mobile logo. It is simple and straight forward for the main header image, but does not seem to be so for the mobile. Please help.
Also, I am trying to get my logo to sit to the left of my navigation bar. I have tried to do this in the navigation menu... tried using header as navigation, which would work, but I can't increase the size of my logo. Tried going to Elements and creating a header there, but can't figure out how to adjust the placement of my navigation, and I don't want it way at the top of the screen.
Thanks,
Gabriel
Hi there,
Logos uses in the Mobile Header and in desktop Navigation as header are defined by the height of the menu items that is set in the customizer.
Alternatively you can use this CSS to set a specific height just for the logo:
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 80px;
}For the desktop you can either use the Navigation as Header and increase the Menu Item height ( Or i can provide some CSS ). Or you can set the Customizer > Layout > Primary Navigation --> Navigation Location to Float Right.
When I am adding CSS as above, do I just stack that below the other CSS I have pasted in below Simple CSS or Additional CSS?
Thats correct add it to the very bottom of the stack as standard, if it doesn't work try adding it to the top of the stack which would suggest that there is some broken CSS in your stack. If some CSS is not written correctly, any CSS below it may not work.
I suggest that you choose either Simple CSS or Additional CSS to add all of your CSS too - don't split it between the two.
Simple rule with CSS - it stands for Cascading Style Sheets. So if there are two CSS rules the one below it will overwrite the one above it eg.
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 80px;
}Followed by:
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 180px;
}The second one will overwrite the first.
Very helpful. Thanks. I will give it a go.
You're welcome
