WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] making the top margin above header picture 0px? (5 posts)

  1. jiW
    Member
    Posted 2 years ago #

    Info: Running twentyeleven header without headertext. Using an
    uploaded picture 1000px and 160px. Managed to remove the header search box. Made a twentyeleven child theme folder and style.css file.

    Goal: Making the margin above the header picture 0px.

    Firebug says the margin is 28px and the code is:

    html {
        margin-top: 28px !important;
    }

    If I put in:

    html {
        margin-top: 0px !important;
    }

    in the style.css child theme file.
    Then the margin is still there, and firebug says:

    html {
        margin-top: 28px !important;
    }
    
    html {
        margin-top: 0 !important;

    How do I set the margin above header picture to 0px?

    Thank you.

  2. Can you please provide a link to your site?

  3. jiW
    Member
    Posted 2 years ago #

    Thank you for answering.
    I have just started using wordpress, so I would prefer not to give my
    website address.
    You may get a screenshot here.

  4. alchymyth
    Forum Moderator
    Posted 2 years ago #

    screenshots are not much use for helping with formatting questions.

    generally, the 28px are from the admin bar -

    the cause of the margin is (if I remember right) from a style of #page;

    possibly search the forum for answers to your question ...
    or using a tool such as Firebug http://getfirebug.com/ might help to find which style to edit.

  5. jiW
    Member
    Posted 2 years ago #

    Thank you for answering.
    As I wrote, I used firebug to inspect the page. And strangely
    firebug said a code like this:

    html {
        margin-top: 28px !important;
    }

    But nowhere could I find that piece of code.
    And if I change it to 0px or -28px in the child theme style.css
    it got overruled and therefore didn't work.

    Maybe I have found a solution.
    I copied this piece of code into the child theme style.css:

    #branding img {
        height: auto;
        margin-bottom: -7px;
    width: 100%;
    }
    a img {
        border: 0 none;
    }

    By adding margin-top: -32px;
    Like this way:

    #branding img {
        height: auto;
        margin-bottom: -7px;
        margin-top: -32px;
    width: 100%;
    }
    a img {
        border: 0 none;
    }

    I can change the space between browser bar and the header picture.
    I don't know why it works.

Topic Closed

This topic has been closed to new replies.

About this Topic