Need help? Check out our Support site, then

Adding space above Site Title - Twenty Eleven

  1. I would like to reduce the space between the top of the page and the site title... I have read numerous related subjects but can't find the code, would you mind helping me out? Thanks,

    Reducing the spacing between page and site header

    The blog I need help with is

  2. To adjust the space above the site title in the Twenty Eleven theme, try this:

    #site-title {
      padding-top: 1em;

    Adjust the 1em to the spacing you want.

  3. Sorry , but that didn't work.... question.. do I paste the code at the top of the page or down near the firs "site" reference?

  4. FOUND it ....

    changed this:

    #site-title {
    padding:4.95625em 0 0;

    to this:

    #site-title {
    padding:1.95625em 0 0;
    ;) happy

  5. Nice work!

    padding: 1.95625em 0 0; and padding-top: 1.95625em; should do the exact same thing by the way. The rule that I added should also work.

  6. now I want to move the site title a little more to the left, so my question is:

    am i looking for the reference


    LOL... don't tell me, i just need a hint as to what I'm looking for and then I want to try to take it from

  7. In the case of your theme, Twenty Eleven, that particular space to the left of the site title is actually set on the "#branding hgroup" selector, and it's using the shorthand version of the margin property.


  8. Is this what I'm looking for?

    #branding hgroup {
    margin:0 4.6%;

  9. I'm confused... In the box model it states that the example shows 3 values yet it states that they refer to 4 values:

    body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

    I don't understand where the 4th value comes from?

  10. I got the left margin by changing the following:


    #branding hgroup {
    margin:0 4.6%


    #branding hgroup {
    margin:0 0.6%

    :) happy ..

  11. This is just one example showing what happens if there are three values. You can actually have one, two, three, or four values.

    When there are three values, then the 2nd value is used for right and left:

    body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */

    If there are four values, then the values work clockwise like this:

    body { margin: 1em 2em 3em 4em } /* top=1em, right=2em, bottom=3em, left=4em */

    You might like this site where you can test out changes on the page:

  12. Perfect... thanks... So, if I understand it, it doesn't matter where the code is located as long as the instructions are "correct" it will go where its coded to go! (If that makes sense) lol

    I will use this w3schools a lot... cheers...

  13. It does matter what order the code is in. If you add two rules that are the same specificity (meaning the same level), then the latest one is used. So, adding new CSS to the very end of your custom CSS edits is probably the best way to do it.

Topic Closed

This topic has been closed to new replies.

About this Topic