More space between pages/post to banner

Activello
1

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;
}

2

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

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

Best regards,
Support.

3

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 */ ?

4

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:


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

How to find the page id:

Best Regards,
Support

5

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?

6

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

7

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?

8

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?

9

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/marketing-specialist/
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/work-with-me/
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!

10

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;
}