Responsive Header Increase, Education Theme

[suecline]

Hi -

We're nearly finished building out our client's new site, but we need to increase the size of the header to allow a search box and not screw up the theme being responsive.

Here is the draft site: http://209.59.178.236/~gses14/

Can anyone suggest a solution for increasing the header height and maintaining responsiveness?

Thanks -

Sue

http://209.59.178.236/~gses14/

[AnitaC]

Look for this and change the min-height to about 141px:

#header .widget-area {
    float: right;
    min-height: 95px;
    padding: 25px 0 0;
    position: relative;
    width: 740px;
}

It looks fine on 320px when you do this, however when you flip to 480 there isn't a padding at the bottom. You can add this to the media queries under the 1200 size, which should be enough padding.

#header .searchform {
    	padding: 15px;
}

---

Need help with customization or troubleshooting? Reach out to me.

[suecline]

Anita thank you!

I got the first part added no problem but can't quite figure out the 2nd part of your suggestion.

I'm guessing I need to add a new section, something to the effect of this?

@media screen and (max-width:1200px)

Thanks again for the speedy response!

Sue

[AnitaC]

Yes, just add that to there. And it should be fine.

---

Need help with customization or troubleshooting? Reach out to me.

[suecline]

Thank you again!

I got the search box visible and sort of positioned well by making the min-height: 160px;

Now I've got an odd grey bar that wasn't there before behind the tabs running horizontally through the area.

Is there a way to remove that?

[AnitaC]

Okay, look for this:

#header {
    background-color: #fff !important;
    background-position: center top !important;
    border-top: 4px solid #eee;
    margin: 0 auto;
    min-height: 120px;
    width: 100%;
}

Change the min-height to about 177px. Then let's check it again on responsive.

---

Need help with customization or troubleshooting? Reach out to me.

[suecline]

Anita pushing it to 183 did the trick, thank you!

I see I've got a real problem with the Featured Content area but I don't see where or why that is the case from this modification. Oy! Is that a this problem or something else entirely?

Thanks again -

Sue

[AnitaC]

What is the problem? Where? I don't see anything out of the ordinary. I am using Firefox. Are you meaning on desktop, mobile? Where?

---

Need help with customization or troubleshooting? Reach out to me.

[suecline]

I'm sorry to be unclear. When I test the site at http://www.studiopress.com/responsive/ the buttons don't align on the 480 and 768 views.

[suecline]

And, since you're being beyond kind, how do I right align that search box? I thought adding this would nail it but alas not so:

#header .searchform {
padding: 15px;
float: right;
}

@media screen and (max-width:1200px)

[AnitaC]

Almost, take the float: right out and add margin: 0 auto:

#header .searchform {
margin: 0 auto;
padding: 15px;
}

Try that in that area.

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

But leave it as it is in the lower area.

---

Need help with customization or troubleshooting? Reach out to me.

[suecline]

Got it! I changed the padding to 0 and it snapped right to it. It's a little higher than I might like but at least it's aligned with all the other elements.

Thank you thank you! My children will happily bake you a present if you're in the VA area!

[AnitaC]

That's why you could have kept the padding and added the margin: 0 auto; then you would have the spacing you desire.

---

Need help with customization or troubleshooting? Reach out to me.

[AnitaC]

Ha! on the baking! You're welcome.

---

Need help with customization or troubleshooting? Reach out to me.

[suecline]

I tried that, really, I did, but the box was still stubbornly not moving, so that was all I could think to do.

My apologies, I'm really a chef who couldn't stand the horror the school presently has for a website LOL

I see you like chocolate, so say the word and I'll whip you up something that will make you cry. I'm a MUCH better pastry chef than web designer 😉

What kind of dog is Buster? I've got one that looks similar:

[AnitaC]

Awe, Thanks. What a cutie. Buster is poodle and bichon, but "he" thinks he's a 4 year old child. So glad it worked out for you.

---

Need help with customization or troubleshooting? Reach out to me.

[suecline]

Thought so! Lindsey is a bichon mix as well but we think maltese. Either way, both cute!

Thanks again!

[Author]

Posts