Responsive Header Increase, Education Theme

Community Forums Forums Design Tips and Tricks Responsive Header Increase, Education Theme

This topic is: resolved

This topic contains 17 replies, has 2 voices, and was last updated by  suecline 2 months, 1 week ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #113929

    suecline
    Member
    Post count: 13

    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/
    #113956

    AC
    Blocked
    Post count: 7712

    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;
    }
    
    #113965

    suecline
    Member
    Post count: 13

    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

    #113966

    AC
    Blocked
    Post count: 7712

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

    #113968

    suecline
    Member
    Post count: 13

    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?

    #113969

    AC
    Blocked
    Post count: 7712

    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.

    #113974

    suecline
    Member
    Post count: 13

    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

    #113975

    AC
    Blocked
    Post count: 7712

    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?

    #113976

    suecline
    Member
    Post count: 13

    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.

    #113977

    suecline
    Member
    Post count: 13

    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)

    #113978

    AC
    Blocked
    Post count: 7712

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

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

    Try that in that area.

    #113979

    AC
    Blocked
    Post count: 7712

    But leave it as it is in the lower area.

    #113980

    suecline
    Member
    Post count: 13

    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!

    #113981

    AC
    Blocked
    Post count: 7712

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

    #113982

    AC
    Blocked
    Post count: 7712

    Ha! on the baking! You’re welcome.

Viewing 15 posts - 1 through 15 (of 18 total)

The topic ‘Responsive Header Increase, Education Theme’ is closed to new replies.