Tutorial on How to Adjust the Position of Your Header

This is a very basic tutorial, but very useful.  I am going to show you how to do it in 2 different templates.

Tutorial # 1:  Using the good old "Minima" Template.

Upload your header image like you would normally and get rid of the lines around your header.  If you don't know how to do that, I have an easy tutorial here.

Next head over to your "Edit HTML" page, and scroll down to your
"#header img {"  and add "margin-top: Xpx;", as seen below.  I did -15px so that my header would be flush with the top, but you can put any number, if you want to bring the header down, use a positive number instead of a negative.

That's it! Soooo Easy :)

Tutorial #2: Using the NEW "Simple" Template.

Upload your header image like you would normally.  Head over to your "Template Designer" and Click on "Advanced" and "Add CSS".

Paste this into your CSS box (see below):

.header-inner {
   margin-top: -10px;

You can change -10 to any number :)

Hope that helps :)


  1. Thanks for the tip, Carolynn. I did try, but it seems to be unchanged! Really don't know why. I even put -30px but nothing happened! Much appreciated your help on this.

  2. Thanks for pointing that out! I left out the semicolon. So just make sure there is a ; after the -30px Let me know if that fixed it.

    I did fix the tutorial too by the way :)

  3. Hi Carolynn,
    Thanks a lot for your help, I tried again with your tutorial, but unlucky me, it didn't move! Here is the code from my HTML source, I am wondering if I made st wrong:

    #header img {
    margin-$startSide: auto;
    margin-$endSide: auto;
    margin-top: -30px;
    Very sorry for bothering you, but you know, I know nothing about HTML code :(! So I just follow the easily instructions from the very kind people like you!
    Thanks again,

  4. hum.... download your full template, and then email it to me, and I will look at it for you when I get a moment :)

  5. Thanks Carolynn, I will send it to you, hope it will not take much time. I am so sorry for trouble you...

    Have a very nice weekend! :)


Related Posts with Thumbnails