Ive tried and tried and looked and cannot figure what Im missing. Sorry if Im duplicating a thread.
I need to control the header height (the part above the menu) in Vantage. Its too tall. Ive changed files to make sure they are smaller etc… nothing seems to make sense. I imagine this is a custom css thing, but Im totally stumped. Ive looked all over this site and searched but I cant seem to do it.
I think I need it to be about 150-200 pixels. Any pointers in the right direction are appreciated.
Hi WholeLifeWell
Have you adjusted the header padding setting at Appearance > Customize > General: Header Padding?
Hope that helps.
yes it is 0. The overall height is my problem. Maybe Im not understanding things correctly.
That field has a bug and unfortunately only accepts 1 as the lowest value. At 0 it rolls back to default.
You could try the following under Appearance > Custom CSS for 0:
/* Vantage Header Padding */ header#masthead .hgroup { padding-top: 0 !important; padding-bottom: 0 !important; }I already have that. I guess Im not understanding or not communicating clear. I have a logo that is 200px tall, but the area up top is taller than the logo.
When I change the values in the css code you have here, nothing occurs in my header. I change to to 200 and nothing changes. I change it to 0, or even negative, nothing.
This is what I currently have
#main {
padding-top: 0px !important;
padding-bottom: 5px !important;
}
header#masthead hgroup {
padding-bottom: 0px !important;
padding-top: 0px !important;
max-height: 200px !important;
}
.main-navigation {
margin-top: 0px !important;
}
Thanks for an input on this. Im using Vantage a few places and really recommend it.
No problem.
hgroup was changed from a tag to a div class in a recent update, to resolve a few problems. Please try adding a period in front of hgroup in your CSS. Check my example to see what I mean.
That explains everything. At some point it was working and Im still learning. PHEW!! Ok no I can wrestle wit this.
So basically whatever the actual height of the logo is what will be used on the header, and the padding is white space around it right?
For sure. Sorry about the hassle, it was something that we had to do.
That’s it. Logo renders at the size uploaded, padding is the header space around the logo.