WordPress.org

Forums

How to Put space Between the header and top of page (14 posts)

  1. Moses
    Member
    Posted 3 years ago #

    Im using twenty ten and moved the menu bar on top of header and now i want to put space between the menu bar and the top of the page ..about 10 px or so
    http://www.greenfutureconstruction.com

    Thanks

  2. 1_Knight
    Member
    Posted 3 years ago #

    in your css styles try adding this to your

    #masthead
    margin-top:10px;

    try that hope it helps

  3. Moses
    Member
    Posted 3 years ago #

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

  4. 1_Knight
    Member
    Posted 3 years ago #

    Didn't it move at all?

  5. 1_Knight
    Member
    Posted 3 years ago #

    What ever you did to the

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

  6. Moses
    Member
    Posted 3 years ago #

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

  7. 1_Knight
    Member
    Posted 3 years ago #

    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?

  8. Moses
    Member
    Posted 3 years ago #

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

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

    by the way what is this masthead ?

  9. 1_Knight
    Member
    Posted 3 years ago #

    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

  10. i_g_wright
    Member
    Posted 3 years ago #

    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.

  11. Moses
    Member
    Posted 3 years ago #

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

  12. i_g_wright
    Member
    Posted 3 years ago #

    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,

  13. Moses
    Member
    Posted 3 years ago #

    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

    ?

  14. i_g_wright
    Member
    Posted 3 years ago #

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.