badget

Biggest Sale! Special Offer!

Get 30% discount on all of our single themes with this coupon code: #30%SALE

Hurry up! *Limited time offer*
View all Themes

Gap between header and body

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 25, 2015 at 8:29 am #23481
    Ewald
    Participant

    Hi,

    I would like to insert a gap between my header/menu and the rest of the content. I played with margin-top and padding-bottom but I didn’t get the solution (only increased the space on the top of the content div).

    Thanks in advance.

    March 26, 2015 at 10:57 am #23523
    Theme Horse Support Team
    Keymaster

    Hi Ewald,

    Please Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

    #main {
    padding: 70px 0 30px;
}

    Note: You can change above digit value to increase/decrease the gap between header and body.

    Thank you!

    March 26, 2015 at 11:20 am #23527
    Ewald
    Participant

    Hi,

    I tried this solution but figured out, that it doesn’t solve my problem. The desired state is that I can see the background image in the gap. This solution increases the white content box, but doesn’t separate the header from the content. The page I’m working on is this.

    Thank you!

    March 27, 2015 at 6:37 am #23556
    Theme Horse Support Team
    Keymaster

    Hi Ewald,

    Are you asking to separate the header/menu and content are? So that you can see the background between header and content area?

    Thank you!

    March 27, 2015 at 9:22 am #23561
    Ewald
    Participant

    Exactly, this is what I want to do!

    Thank you!

    March 31, 2015 at 5:22 am #23662
    Theme Horse Support Team
    Keymaster

    Great ! 🙂

    March 31, 2015 at 5:48 am #23667
    Ewald
    Participant

    Can you help me one more time? I was able to reach my goal by making the wrapper transparent and pushing the #main width to the same level as header and footer. In the web view everything looks great, but due to the padding, the mobile view is pushed out of the borders on the right side (because I fixed the padding to 10 or 20 px).. How can I get that the width of the #main is the same as the header/footer width in all views?

    Thanks.

    April 1, 2015 at 5:30 am #23687
    Theme Horse Support Team
    Keymaster

    Hi Ewald,

    Can we have the site url please? So, that we can provide you a exact CSS code.

    Thank you!

    April 1, 2015 at 8:18 am #23691
    Ewald
    Participant

    Hi,

    when you look at the startpage
    I added those two things to the custom.css

    .wrapper {
 background-color: transparent;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

#main {
  padding: 20px 30px 10px;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #ffffff;
}

    With the padding, I minimized the white space in the #main div at the top and bottom AND pushed the div to the left and right, so the width is the same as the header and footer. But when you minimize the window to get the mobile version, the #main div exceeds the width on the right side. I don’t know if padding is the proper way to do this, it worked for the “normal” view, so I used it temporary.

    Thanks

    April 3, 2015 at 5:10 am #23736
    Theme Horse Support Team
    Keymaster

    Hi Eward,

    Use padding left and right in %. You can try below CSS code for #main:

    
#main {
  padding: 20px 2.97% 10px;
  margin: 30px 0;
  background-color: #fff;
}

    Thank you!

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.