Minimum Pro header height

[Terence]

I just bought Minimum Pro and I'd need some advice about how to increase the height of the header.

I tried using...

.site-header {
padding-top: 15px;
padding-bottom: 15px;
}

and also...

.site-header {
min-height: 85px;
}

but in both cases, although they increase the height of the header, they also cause other problems like the drop-down menus start off the wrong location, and also margins at the top of the page get condensed etc.

Perhaps someone could give me some information on the correct way to go about it with Minimum Pro?

[nutsandbolts]

Can you post a link to your site? It's easier for us to help if we can see what you've got on the site.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Terence]

Sure I can. And thanks for asking.

I've only just started to "improve" the theme, so there's not a lot to see at Election Club.

Yet! 😉

[nutsandbolts]

You were on the right track with adjusting the min-height for .site-header, but you will also need to add a rule for the site header wrap to move the title and menu items down.

I did this:

.site-header {
min-height: 125px;
}

and added this rule right below it:

.site-header .wrap {
	margin-top: 20px;
}

That keeps the site title and menu in the middle of the header but allows it to be taller. You may need different values depending on what size you want the header to be. Hopefully that helps!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Terence]

OK, what I have at the moment is this...

/* Increase height of site header 
-------------------------------------------------------------------------------*/
 .site-header {
     background-color: #f77564;
     border-bottom: none !important;
     padding-top: 12px;
     padding-bottom: 12px;
     min-height: 125px;
}

.site-header .wrap {
     margin-top: 20px;
}

Not sure if you meant to remover them but if I remove the padding top/bottom the navigation is not vertically centered.

Also the menu items still are not vertically in the right place and the header is now 125px and not 85px.

This is the look I am working towards with this site.

[nutsandbolts]

Okay, I'm a little confused about the goal. If the goal is to have a similar header height to the link you just posted, you'd want to use 85px instead of 125px. I changed to this:

.site-header {
background-color: #f77564;
border-bottom: none !important;
margin-top: -12px;
padding-bottom: 5px;
min-height: 85px;
}

and the height and vertical spacing look pretty good. Sometimes you just have to play with the numbers until they do what you need them to do.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Terence]

Oh dear. Don't be confused. Its bad enough with one of us.

When I get it right I will post the code back to this thread so anyone following it later can see what I/we did.

Many thanks,

[Terence]

Turned out to be real simple in the end. Don't know what the problem was.

.site-header {
background-color: #f77564;
border-bottom: none !important;
padding-top: 12px;
padding-bottom: 5px;
min-height: 85px;
}

Thanks for your help.

[Author]

Posts