- This topic has 11 replies, 3 voices, and was last updated 3 years, 10 months ago by David.
-
AuthorPosts
-
May 4, 2020 at 7:22 am #1268790Duncan
Hi,
Absolutely love the theme/plugin – have tried many themes in the past, but this one just ‘clicks’ with me, and I use it to develop all of my websites. This is definitely not a criticism, but a respectful request.
One thing that always trips me up every time I do a new site is defining the logo size. I know that the menu height controls the logo size, but sometimes I want to control the menu height and logo size separately. And every time I do this, I have to go searching for the correct ids or classes to modify with some custom css. This bit is always a bit of a sticking point, because I need to account for the different headers (standard, navigation, sticky and mobile). And sometimes I end up using some top margin to make my menu centered with the logo, which doesn’t feel ‘right’.
I would love to have a control in the customizer that allows me to adjust the size of the logo independently of the menu height. But, failing this, would it be possible to have some comprehensive documentation on how to do this with css, taking into account the 4 different headers: standard, navigation, sticky and mobile.
If I’ve missed an existing method or the penny just hasn’t dropped for me, then I’d be grateful if you could point me in the right direction.
Thanks
May 4, 2020 at 9:15 am #1269171LeoStaffCustomer SupportHi there,
I know that the menu height controls the logo size
This is only the case when the navigation as a header is used:
https://docs.generatepress.com/article/navigation-as-a-header/If you are using the default header, then the logo size can be controlled in the customizer:
https://docs.generatepress.com/article/adding-header-logo/Can you link me to the site in question if this doesn’t help?
May 4, 2020 at 12:53 pm #1269455DuncanHi Leo,
Thanks for the reply. I didn’t know that the menu line height only controls the logo size in the navigation header, so thanks for the info.
However, if I use the default header and set the logo to the required size and menu to the required height, then the menu is not vertically centered: https://snipboard.io/yZ8N0T.jpg
Alternatively, if I use the navigation header then the only way to get the required logo size is to set a high value for the menu height: https://snipboard.io/e2aAbT.jpg
I would like to have the menu vertically centered with the logo, but with a smaller height than the logo.
This is why I would like to be able to set the menu height and logo size independently. I’ve shared my site url, but some definitive documentation on achieving this would be really useful.
Thanks
May 4, 2020 at 1:09 pm #1269463LeoStaffCustomer SupportYour site is under the coming soon page.
Can you disable it?
May 4, 2020 at 1:34 pm #1269492DuncanOops, sorry about that. Disabled the coming soon page now.
Thanks
May 4, 2020 at 1:43 pm #1269498LeoStaffCustomer SupportSo when the navigation as a header is activated, there is a default 10px top and bottom padding added to the logo image:
https://www.screencast.com/t/PFbKpAzjfeIn another word, the logo height would be 20px less than the menu item height set in the customizer:
https://docs.generatepress.com/article/menu-item-height-width/If you want the logo height to be the exact same height as the menu item height, then you can use this CSS to remove the padding:
.navigation-branding img, .site-logo.mobile-header-logo img { padding: 0; }
If you want the reduce the logo height while keeping the menu item height, then the top and bottom paddings needs to be increased like this:
.navigation-branding img, .site-logo.mobile-header-logo img { padding: 20px 0; }
Let me know if this makes sense.
May 5, 2020 at 1:22 am #1270017DuncanHi Leo,
Thanks for your reply. What you have posted does make sense, but I want achieve the opposite – I would like to keep the logo the size that it is at the moment, but reduce the menu height, wile also keeping the menu vertically centered with the logo.
Hope that makes sense.
Thanks
May 5, 2020 at 5:23 am #1270319DavidStaffCustomer SupportHi there,
in that case add this CSS:
.navigation-branding img, .site-logo.mobile-header-logo img { height: 130px; }
This will look in the logo size – now you can change the menu item height as you please.
May 5, 2020 at 7:21 am #1270489DuncanHi David,
That’s great, just what I was after thank you. Circling back to my original question, would it be possible for you guys to add this to your documentation? I think that this would be a really useful resource.
So if it can’t be added as an option in the customizer, could you document the css needed to target the logo in each of the default, navigation, sticky and mobile headers?
Thanks
May 5, 2020 at 7:44 am #1270518DavidStaffCustomer SupportYeah – i think we can review the docs on this one 🙂 Thanks for the suggestion .
May 5, 2020 at 1:27 pm #1271141DuncanAwesome, thanks David!
May 7, 2020 at 4:07 am #1273419DavidStaffCustomer SupportYou’re welcome
-
AuthorPosts
- You must be logged in to reply to this topic.