- This topic has 5 replies, 2 voices, and was last updated 1 year, 7 months ago by
David.
-
AuthorPosts
-
July 31, 2019 at 11:07 am #972410
Gabriel
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
July 31, 2019 at 1:05 pm #972462David
StaffCustomer SupportHi 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 31, 2019 at 2:32 pm #972533Gabriel
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?
July 31, 2019 at 2:36 pm #972534David
StaffCustomer SupportThats 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 31, 2019 at 2:38 pm #972535Gabriel
Very helpful. Thanks. I will give it a go.
July 31, 2019 at 3:19 pm #972556David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.