header and Navigation height

Hey,

You need to change the padding-top and padding-bottom values on .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a to shrink the nav.

Cheers

Hi,

I have tried this on my child css, but it doesn’t work;

.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li a {
padding-top: 1em !important;
padding-bottom: 1em !important;
}

Sure I am doing some thing wrong here

I have had some success with this…

.site-header {
background-color: #fff;
padding-top: 5px !important;
padding-bottom: 5px !important;
margin: 0 !important;
}

But I really would like to have more control over the navigation elements, as text size and separation between each of the elements. Also the padding for the navigation, as every time I change the top padding of the header, the navigation is affected also, I would like to have them aligned.. the logo and the nav elements.

The owner f the site doesn’t want that many sub elements on the navigation, that is why I need to reduce the size of all, so they may appear as main elements as possible.

The thing is that the size of the header is small when there is no logo, but no matter how small the image of the logo is, then the height of the header goes big, there is has to be a padding for the logo.

cheers…

Any other ideas .. What am I doing wrong?

Thanks

I am curious about this. I am having the same issue. The code above helped me reduce the space between my logo and the top of the header, and also the space between the bottom of my header and my content. However, I cannot reduce the space between the bottom of my logo and the bottom of the header. It’s like always about 50 pixels no matter what I do.

Here it’s the whole tweak I did,

/*Site header padding + BG color*/

@media screen and (min-width: 767px) {
.site-header {
background-color: #f5f5f5;
padding-top: 20px !important;
padding-bottom: 0px !important;
margin: 0 !important;
}
}

/* custom header padding */
@media screen and (min-width: 767px) {
.site-header .custom-logo-link, .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link
{
    display: block;
    width: 14%;
    float: left;1%;
    margin-right: 1%;
    clear: left;
    margin-bottom: 0 !important;
 }
 }

/*align menu nav and logo */
@media screen and (min-width: 767px) {
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
padding-top: 0;
}
}

Hope it helps you, you can try different setting until it fits your needs, as you can see it has some media queries to not affect the mobile view … good luck

Cheers