Balloons theme: How to reduce gap between Header and Page/Post

The CSS for the header has a margin bottom of 300 pixels. Reduce this.

(line 29 of layout.css)

First, it is best to make changes to a Child Theme so that if your theme is updated, you won’t loose all your alterations.

Always login to your WordPress and do all your alterations in Appearance > Editor (select “style.css”)

To make your change, find:

#header {
    float: left;
    margin: 0 0 300px;
    position: relative;
    text-align: center;
    width: 100%;
}

…change the “300px” (bottom margin) in margin: 0 0 300px; to whatever height you want – i.e. 0px or 100px or whatever.
“Update File” button.
Look at site. (might have to refresh browser)

Hi Dave, Thank you very much! This solved my problem. Although I had to dig a bit more, since the code was not available in “style.css”, but it was in the file “layout.css”, which style.css pulled to give the site its layout.

Btw, do you know how to move the balloons? They are part of the 3D background. I think I have the files where the code for them are located. The codes look something like this..

#parallax-01,
#parallax-02,
#parallax-03,
#parallax-04,
#parallax-05,
#parallax-06,
#parallax-07 {
	position: fixed;
}

#balloons-01,
#balloons-02,
#balloons-03,
#balloons-04,
#balloons-05,
#balloons-06,
#balloons-07 {
    position: absolute;
}

#parallax-01 {
	z-index: 1;
}

#balloons-01 {
    top: 108px;
    left: 124px;
}

#parallax-02 {
	z-index: 2;
}

#balloons-02 {
	top: 160px;
	left: 516px;
}

#parallax-03 {
	z-index: 3;
}
#balloons-03 {
	top: 62px;
	left: 532px;

Yet they don’t change when I alter this code. Any ideas?

Much appreciated. Best!

Each set of ballons is inside a site-wide “parallax”. These parallaxes are stacked on top of each other (front to back of screen simulating 3D) using the “z-index”. The higher the number, the “closer” to you they are.

You can move the balloons inside each parallax by changing the top and left pixels (px).

But FIRST, make sure you have a copy of your “layout.css” before making any changes.

Change the pixels, “Update File” button, view page on browser, refresh browser. You should see a set of balloons move. If you don’t like it, change the pixels back.

You can set the balloons in front or behind others by changing the “z-index” number up or down, but not below ‘1’.

BTW, it is best to make a Child Theme, and put your changes in there, because when the your theme is updated, everything you have altered will be lost.

Hi Dave. I implemented everything you mentioned and everything worked perfectly! Thank you very much for your help, I spent the whole day yesterday struggling with this and was already getting a bit frustrated. I am really thankful for your help.

I am also looking into Child Themes to have a backup of all the changes I made as you suggest.

Cheers, and thanks for everything again!