Support » Themes and Templates » Balloons theme: How to reduce gap between Header and Page/Post

  • Hi everyone, I am having a bit of trouble with the new Balloons theme from I am trying to customise the theme ( you can see my website at ) but I don’t know how to make the pages/posts move up/closer to the header. I have tinkered with almost all the files (php and css) via FTP to reduce this gap but have had no success, I just move all the website content (both header and post) up or down, but not just the Page/Post section which is what I intend. Anyone any suggestions for this? Thank you very much in advance.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Andrew Nevins


    Front-end developer

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

    (line 29 of layout.css)

    D M


    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-07 {
    	position: fixed;
    #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!

    D M


    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’.

    D M


    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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Balloons theme: How to reduce gap between Header and Page/Post’ is closed to new replies.