WordPress.org

Support

Support » Themes and Templates » How to Put space Between the header and top of page

How to Put space Between the header and top of page

Viewing 13 replies - 1 through 13 (of 13 total)
  • in your css styles try adding this to your

    #masthead
    margin-top:10px;

    try that hope it helps

    Moses
    Member

    @greenfuture

    thanks but it did not put the space between the nev bar and the top of page ..i used this code

    #masthead {
    margin-top:20px;
    }

    Didn’t it move at all?

    What ever you did to the

    #masthead undo it so I can see it in the code then I can look at it again

    Moses
    Member

    @greenfuture

    What do u mean ” undo”
    I pasted the code u gave me
    It didnt work and I took it off
    ?

    Ok,

    Did you take every thing out of the #masthead?

    If so at least put in something like

    #masthead{
    margin:0;
    padding:0;
    }

    Because I can’t see any style code for the #masthead at all?

    Moses
    Member

    @greenfuture

    ok it there …in the css for the child theme.

    #masthead{
    margin:0;
    padding:0;
    }

    by the way what is this masthead ?

    Ok I still can’t see it can you post the css code that you put in.

    you need to to type the #masthead just below # of header.

    If I do it manually in Google chrome it works every time
    but it is just to see what happens it is not permanent.

    Again past here what you are typing in.

    Just copy past

    the masthead is a container in twenty ten just below the header

    Hi,

    All your elements are positioned so you need to ‘reposition’ them.

    I hope this helps.

    Change the CSS you added to #access to this:

    #access {
        position: absolute;
        top: 10px;
    }

    Now on #masterhead try changing it to this:

    #masthead {
        margin: 30px 0 0 0; /* top right bottom left */
        padding: 0;
    }

    You will now need to shift your title & description down:

    #site-title

    #site-title, #site-title a {
        color: white;
        float: none;
        font-size: 22px;
        position: absolute;
        left: 90px;
        top: 30px;
        z-index: 2;
    }

    #site-description

    #site-description {
        color: white;
        float: none;
        font-size: 14px;
        position: absolute;
        left: 180px;
        top: 87px;
        z-index: 2;
    }

    I hope that helps,

    Please note:
    Backup your CSS first incase this doesn’t do what you want it too.

    Moses
    Member

    @greenfuture

    sorry but i tried adding and changing ..it didn’t do it .
    it actually messed up my page ..

    please take a look at this code and explain how to fix

    /*
    Theme Name: greenfuture twenty Ten Child
    Theme URI: http: //www.greenfutureconstruction.com/
    Description: Child theme for the Twenty Ten theme
    Author:
    Author URI: http: //www.greenfutureconstruction.com/about/
    Template: twentyten
    Version: 0.1.0
    */

    @import url(“../twentyten/style.css”);

    }
    #site-title, #site-title a {
    color: #ffffff;
    float: none;
    font-size: 22px;
    position:absolute;
    left: 90px;
    top: 20px;
    z-index: 2;

    }
    #site-description {
    color: #ffffff;
    float: none;
    font-size: 14px;
    position:absolute;
    left: 180px;
    top: 65px;
    z-index: 2;
    }

    .one-column #content {
    margin: 0 auto;
    width: 900px;
    }

    #header {
    padding: 0;
    }

    #access {
    position: absolute;
    top: 0;
    }

    #branding img {
    margin-top: 17px;
    }

    #access li:hover a, #access ul ul:hover a
    {background:transparent; color:#gghhdd;}

    #branding img {
    border-bottom: 0px solid #000000;
    border-top: 0px solid #000000;
    display: block;
    float: left;
    height: 130px;
    width: 940px;
    }

    #main {
    position:relative;
    top:-20px;
    }

    Hi,

    What happened to your website when you updated the code?

    The code I showed you should just reposition your header elements, ‘pushing’ them down, nothing else should have been altered.

    Thank you,

    Moses
    Member

    @greenfuture

    Hi and thanks again

    if i use the this code on the child css –

    #masthead {
    margin: 30px 0 0 0; /* top right bottom left */
    padding: 0;
    }

    it makes the page look like the original with out all the css edited

    Where should i add it to ?

    and when i change the access to 10 px it puts the menu bar on top of the header …making it smaller then the size i wont

    ?

    Hi,

    It appears the code i have supplied is not what you are after.

    When you say:

    and when i change the access to 10 px it puts the menu bar on top of the header …making it smaller then the size i wont

    Yes that’s what the code does, you then also need to ‘push’ down the header image & the header content (Your website title & description) that’s what the #masterhead, #site-title, #site-title a & #site-description code should do.

    If you could paste some screen grabs of what you want, what happens when you try the code by me or 1_knight then we maybe able to help out more?

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘How to Put space Between the header and top of page’ is closed to new replies.