Archived topic
Issue Logo Size Navigation Bar (Too Small)
15 replies · Started by Kevyn on April 26, 2018
Hello,
I added my logo in the navigation bar. However, it is too small, I can barely see it...
Can you advice me on how I can change its size?
It's originally 4000*4000 pixels. So I don't think the actual size of the logo is the issue.
I'm using the GP premium.
Thank You
Kevyn
Hi there,
Your site is under coming soon page.
Any chance you can unlock it for us to see?
Let me know :)
Hey Leo,
You should have access to it now.
Thank You
Kevyn
I would recommend scaling the logo down to like 200 by 200 (should improve load time) and crop it so there isn't so much padding on the image itself: https://conversionwebcopywriter.com/wp-content/uploads/2018/04/3030_logo01.png
Let me know if this helps.
Hello Leo,
I did what you suggested and it did not change anything...
Kevyn
Hmm I'm still seeing the same image being uploaded: https://conversionwebcopywriter.com/wp-content/uploads/2018/04/3030_logo01.png
Did you reupload it in navigation logo?
Sorry, I doubled checked and now it is a bit bigger but still too small. I would like it to be around 600 pixels width. Also when I go down on the page, it disappears from the navigation menu. I would like it to stay but being smaller.
Here is an example of what I'm trying to replicate: http://www.rebeccamatter.com/
Ok so increase the menu item height and the logo should increase with it:
https://docs.generatepress.com/article/menu-item-height-width/
Then set the sticky navigation menu item height lower then the value above:
https://docs.generatepress.com/article/sticky-navigation/#menu-item-height
Let me know.
It's definitively looking better.
However, I have an issue on mobile as when I click on menu, they are separate by the same height, which does not look good or I have to make it 20 px, meaning there is no logo anymore...
Is there a way to fix that?
Thanks Leo
You can also try this CSS to remove the padding around the logo:
.main-navigation .navigation-logo img {
padding: 0;
}
The menu item height option has a mobile toggle option so you can set it different than the desktop:
https://docs.generatepress.com/article/menu-item-height-width/
Let me know :)
Hey Leo,
I'm not familiar with the CSS. I copy-paste the code to the HOOK under the header and it simply writes it under the navigation bar. If I was suppose to add it to Simple CSS, how does it know where to add the code on the page?
Also do I have to modify the code you sent me with the link of my image? If so, where can I find it.
Thanks for the support :)
Kevyn
CSS won't work in hooks. Simple CSS or Additional CSS are the easiest options.
The code should run on every page so you don't need to make it page specific.
Simply copy and paste it in should work.
Let me know :)
It looks better on the desktop but does not change anything for the mobile and tab version.
Your mobile header logo isn't cropped properly still: http://www.screencast.com/t/lArNkUvIp
https://docs.generatepress.com/article/mobile-header/
Then I would recommend increasing the menu item height with mobile toggle on: https://docs.generatepress.com/article/menu-item-height-width/
Hey Leo,
It's seems to have worked.
Thank you so much for your support.
You can close this ticket.
Thanks
Kevyn