Simple Catch Theme: Changing size of header box

I’m not sure what exactly you want to change. The best way to work with CSS is by using Firebug — which lets you easily identify which CSS is affecting specific parts of a page — thus telling you what code to copy to the custom CSS file and edit the styles.

Thank you WPyogi. I don’t have a wonky code problem though.

If you’ll visit my site, you’ll see that the box containing my header (background, logo, search bar, social media icons) is large. I’m trying to make the width of the header box smaller.

Firebut is the best tool for doing ANY CSS work — wonky or not! Now that you’ve said the width, I can use Firebug to see where the width is set — it’s here:

div.layout-978 {
    margin: 0 auto;
    width: 978px;
}

That code is in a file called 978.css — not sure what that is — maybe your custom CSS?

There may be other things you’ll need to change if you change the width in the above…

Thank you, WPyogi, I thought firebug was for fixing bad code. I took your advice and changed the CSS, and that didn’t work. It affected my entire body and header width.

I installed firebug and am trying to use it to find how to make my header box slimmer from top to bottom and am still not finding what I need. Any other ideas?

I really appreciate your help.

I’m still not that clear on what you want it to look like — earlier you mentioned the width and now you say height??

I’d certainly center the logo — by changing this CSS code:

#header .logo-wrap {
    margin: 54px auto 0 auto;
    width: 714px;
}

To shrink the vertical spaces, reduce the margin-top in this code:

#header .social-search {
    float: right;
    margin-top: 40px;
    padding-right: 20px;
    width: 306px;
}

and in this one:

#header .social-search form.searchform {
    padding-top: 30px;
}

and in this one:

#header #mainmenu {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 0 #FFFFFF;
    float: left;
    margin-top: 40px;
    position: relative;
    width: 976px;
    z-index: 1000;
}

ACK! Yes, I meant height. It’s late here and I’m tired. I’m so sorry.

Also, Using the code you suggested for centering the logo, which I’d like to do, what should I change??

So sorry for the mix-up.

Thank you for finding those codes! Now what part of them should I change and to what??

No problem, I understand, it’s a lot to grasp when it’s new :).

Try putting all of this in the custom CSS file:

#header .logo-wrap {
    margin: 54px auto 0 auto;
    width: 714px;
}

#header .social-search {
    margin-top: 5px;
}

#header .social-search form.searchform {
    padding-top: 5px;
}

#header #mainmenu {
    margin-top: 5px;
}

You might need to change the 5px spacing in the last three — depending on how it looks to you.

Oh, and after you make the changes, clear your browser cache — as that sometimes keeps changes from being visible right away.

You ROCK Mr. WPyogi!!!!!

Thank you! Thank you! Thank you!!

I’m keeping Firebug and I’ll try to figure it out. I know >< that much CSS, so maybe Firebug will help me learn more. ??

THANK YOU!!!!!!!

I’m marking as resolved.

F5 is what I always use to see changes, by the way. ??

Aw, so glad it worked the first round — CSS does not always go that well :). And now, hopefully, you can go to bed? Where are you , BTW? I’m in California — so it’s not that late but I gotta get to bed so I can get up and go running in the am…

Oh, and it’s Ms. (People here seem to assume Mr. a lot — don’t know why that is…no biggie, just interesting.)

I’m in MS – way down South.

That’s funny that I assumed Mr.

I think it was based more on your avatar than anything else. Your red monster looks masculine to me. HA!

I’m always excited to meet other geeky girls like me – so it’s nice to meet you!! ?? Thank you again for all of your help! You ROCK even more now that I know you’re a girl!

Hello,

I want to change the header height in my website. Please refer my site’s link https://www.insuranceonlineinfo.in/

I slider is half way down the screen therefore the presentation is not looking good. I tried fixing in css however I am not able to edit it. Please help me in moving the slider towards north so that the entire slider is visible in the screen whenever the website in opened.

Thank you very much in advance.

Best Regards,

Tarun Angra