Archived topic
Shrink Menu Item Height without Effecting Logo
11 replies · Started by Kelly on July 20, 2021
Hello,
I am trying to adjust the Menu Item Height of my navigation but it is currently effecting the site logo as well. Is it possible to make the navigation smaller in height (60px) and keep the logo size?
Hi Kelly,
Try disabling this option in the customizer:
https://docs.generatepress.com/article/navigation-as-a-header/
Then set the navigation location to float right:
https://docs.generatepress.com/article/navigation-location/
Then you should get basically the same layout but able to control the menu item height separate from the logo size.
Let me know if this helps :)
Hello Leo,
Thank you for your response. I followed you suggestion, however when I turn off "Nav as Header", the logo disappeared entirely and the nav bar is no longer full width. Do I have something changed somewhere else?
Can you confirm that there is a logo uploaded in under Customizer > Site identity?
Yes, the logo is uploaded. When I check "Nav as Header" it reappears.
Strange.
Can you make sure the logo width slider in the customizer is not set to 0?
Hey Leo,
It took some tinkering but I manage to achieve a closer look to what I want. Without changing the nav height, how can I get my logo moved down to align with bottom of nav and top of image?
Hi there,
have you tried reducing the Customizer > Layout > Header - top and bottom padding to 0? And then you won't need the negative top margin CSS.
The height of the navigation will then be defined by the height of the logo.
Hey David,
Thank you. I made your suggested change and it is looking good. Out of curiosity, I was trying to produce a similar header like the below URL. It looks as though the logo is independent from the Navigation. Is this possible?
Try this CSS:
.site-logo {
position: absolute;
z-index: 99;
}
Leo, thank you!. You guys got it! Great support as always!!
No problem :)