# More space between pages/post to banner

**URL:** <https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493>\
**Category:** Activello\
**Created:** [October 13, 2017, 1:46pm UTC](https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493 "2017-10-13T13:46:32Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![liah](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/l/eb9ed0/32.png) [@liah](https://colorlibsupport.com/u/liah)\
**Post date:** [October 13, 2017, 1:46pm UTC](https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493/1 "2017-10-13T13:46:32Z")

</div>

I have removed the masthead (picture slider banner and logo area) of my page. I am very happy with the result however now the pages and/or post are too close to the menu bar. Can you please help me with the CSS code?

Picture example attached, I want more space along the red dotted line. Thank you in advance!

At the moment I have all the CSS code below. Do I need to remove or add something?:  
.main-content-area .cat-title {  
display: none;  
}

.entry-meta .posted-on {  
display: none;  
}

article.post .post-categories a, .post-inner-content .cat-item a {  
display: none;  
}

.navbar-default .nav-search {  
display: none;  
}

@media (min-width: 767px){

.site-navigation-inner {  
float: none;  
margin: 0 auto;  
display: table !important;  
width: auto;  
}  
}

.flex-caption .post-categories {  
display: none;  
}

#page .flex-caption \* {  
font-family: Lora;  
}

#page a:hover {  
background-color: transparent !important;  
}

/_hover menu color_/  
.dropdown-menu\> li\> a:hover{  
background-color:#d0b482 !important;  
color:#F05214;  
}

.cat-title,  
body.page h1.entry-title {  
display: none;  
}

nav.navbar.navbar-default {  
box-shadow: none;  
}

.navbar-nav li a {  
padding: 5px 0 10px 10px;  
line-height: 10px;  
}

#header .top-header {  
padding-top: 10px;  
padding-bottom: 10px;  
}

.bottom-header{  
display: none;  
}

.home .bottom-header{  
display: block;  
}

#page .navbar-default .navbar-nav \> li \> a, #page .nav-search {  
padding: 10px 0;  
}  
footer#colophon {  
padding: 25px 0;  
}

nav.navbar.navbar-default {  
position: fixed;  
top: 0;  
left: 0;  
width: 100%;  
z-index: 999999;  
}

/_menu font size_/  
.navbar-default .navbar-nav\> li\> a{  
font-size: 11px;  
}

#masthead \> .container {  
display: none;  
}

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [October 13, 2017, 8:08pm UTC](https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493/2 "2017-10-13T20:08:06Z")

</div>

Hey there,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -\> Appearance -\> Customize -\> Additional CSS

```auto
/* padding for content */
.container.main-content-area{
  padding-top:5%;
}

```

Best regards,  
Support.

---

<div class="post-metadata">

**Author:** ![liah](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/l/eb9ed0/32.png) [@liah](https://colorlibsupport.com/u/liah)\
**Post date:** [October 17, 2017, 2:23pm UTC](https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493/3 "2017-10-17T14:23:04Z")

</div>

Thank you so much! This support forum and theme are the best. Is it possible to make it like this for all the pages except two? Like can I add a special condition except for /\* padding for content \*/ ?

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [October 18, 2017, 11:16am UTC](https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493/4 "2017-10-18T11:16:21Z")

</div>

Hello there,

In order to do that you would have to locate the page id and add it to the CSS. So it would look something like this:

```auto

/* padding for content */
.page-id-662 .container.main-content-area{
  padding-top:5%;
}

```

How to find the page id:

> **[WordPress Page ID - Where to Find It | Compete Themes](https://www.competethemes.com/blog/find-page-id/)**
>
> Can't find the ID of a Page? Follow this quick tutorial to locate the ID of any Page in your WordPress dashboard.

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![liah](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/l/eb9ed0/32.png) [@liah](https://colorlibsupport.com/u/liah)\
**Post date:** [October 19, 2017, 1:19pm UTC](https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493/5 "2017-10-19T13:19:29Z")

</div>

Thank you for your reply but it isn’t working. I want it to have a spacing (padding) for all my pages except a few. Is the CSS code you gave me for that? Where can I just insert the page id’s of posts I don’t want to have padding on?

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [October 19, 2017, 2:13pm UTC](https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493/6 "2017-10-19T14:13:06Z")

</div>

Hello there,

The code provided before should do that but you need to replace the id with your page id that references a page on your site. The link provided will show you how to find the page id.

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![liah](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/l/eb9ed0/32.png) [@liah](https://colorlibsupport.com/u/liah)\
**Post date:** [October 20, 2017, 8:55am UTC](https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493/7 "2017-10-20T08:55:01Z")

</div>

Thank you for getting back to me but it’s having the opposite effect I wanted. When I add the post ID… it gives it space. I want to know… if it’s possible to have a code where all my pages have space except the four I don’t want it?

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [October 20, 2017, 1:33pm UTC](https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493/8 "2017-10-20T13:33:15Z")

</div>

Could you please share me the page URLs from your site where you do not want to display the space so that i can help you to achieve it?

---

<div class="post-metadata">

**Author:** ![liah](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/l/eb9ed0/32.png) [@liah](https://colorlibsupport.com/u/liah)\
**Post date:** [November 26, 2017, 7:35pm UTC](https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493/9 "2017-11-26T19:35:05Z")

</div>

Hello Movin,

I am so sorry for the delayed reply. I had to deal with some difficult family matter and haven’t been keeping up with my website.

Some pages where I don’t want there to be so much space such as:  
[http://www.thedailydoseofsun.com/work-with-me/virtual-assistant/](http://www.thedailydoseofsun.com/work-with-me/virtual-assistant/)  
[http://www.thedailydoseofsun.com/work-with-me/marketing-specialist/](http://www.thedailydoseofsun.com/work-with-me/marketing-specialist/)  
[http://www.thedailydoseofsun.com/](http://www.thedailydoseofsun.com/)

Pages (all of my blog posts pages) where I’d like to remain this amount of spacing:  
[http://www.thedailydoseofsun.com/about-the-daily-dose-of-sun/](http://www.thedailydoseofsun.com/about-the-daily-dose-of-sun/)  
[http://www.thedailydoseofsun.com/work-with-me/](http://www.thedailydoseofsun.com/work-with-me/)  
[http://www.thedailydoseofsun.com/what-is-a-multipotentialite/](http://www.thedailydoseofsun.com/what-is-a-multipotentialite/)

I’ve tried the previous solution however it doesn’t work.

Thanks in advance Movin. As usual, the support has been spot on. I greatly appreciate it!

---

<div class="post-metadata">

**Author:** ![movin](https://colorlibsupport.com/user_avatar/colorlibsupport.com/movin/32/10922_2.png) [@movin](https://colorlibsupport.com/u/movin)\
**Post date:** [November 27, 2017, 11:28am UTC](https://colorlibsupport.com/t/more-space-between-pages-post-to-banner/18493/10 "2017-11-27T11:28:59Z")

</div>

Please use below CSS code to achieve this.

`.container.main-content-area{
padding-top: 5%;
}`

`
`

`.page-id-173 .container.main-content-area,
.page-id-451 .container.main-content-area,
.page-id-3 .container.main-content-area{
padding-top: 0;
}`