[Resolved] Keep logo same size when changing navigation height

[Charlotte]

Hi, is there a way to add a bit more padding to the top and bottom of the primary naviagtion without affecting the logo size? At the moment I am changing “menu item height” and it is making the logo grow if I increase the height. I have the logo on the same line as the primary navigation.
Thanks
Charlotte

[David]

Hi there,

you could try this CSS:

.main-navigation:not(.slideout-navigation) .main-nav {
    padding-top: 10px;
    padding-bottom: 10px;
}

[Charlotte]

Thank you – how would I change the padding around the hovered/ selected menu items please? I would probably want to decrease it a bit.

[David]

The only padding applied to menu items is left and right which is controlled by the Menu Width in the customizer. The vertical sizing is solely based on the menu item height.

So if you wanted to reduce the menu item height a little and then you could remove the padding that is around the logo with this CSS:

.main-navigation .navigation-logo img {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

[Author]

Posts