header and Navigation height

losrack
(@carlos-jaramillo)

9 years, 11 months ago

Hi,

I have this web that every thing is going smooth, but I have this problem, I need to reduce the header height

Also the navigation height is a little too much since it takes up too much space.

I have change padding and all, but are heights that I defeneetly need to make shorter.

I have targeted stuff with developer tools but it is not working when added to my child-

Please help.
right now is on a temporary domain:

the site is this

Viewing 6 replies - 1 through 6 (of 6 total)

James Koster
(@jameskoster)

9 years, 11 months ago

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
Thread Starter losrack
(@carlos-jaramillo)

9 years, 11 months ago
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
Thread Starter losrack
(@carlos-jaramillo)

9 years, 11 months ago
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…
Thread Starter losrack
(@carlos-jaramillo)

9 years, 11 months ago

Any other ideas .. What am I doing wrong?

Thanks

dfoley75
(@dfoley75)

9 years, 11 months ago

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.
Thread Starter losrack
(@carlos-jaramillo)

9 years, 11 months ago
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

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘header and Navigation height’ is closed to new replies.

Tags