Remove space above content (see link)


#1

Hi I wold like to remove the space (or change the color) above a blog post. Is that possible?

Kind regards,


#2

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 992px) {
      
      .postid-3906 .site-header:not(.float-header) {
        display: none;
      }  
      
      .postid-3906 .page-wrap {
        padding-top: 0;
      }
      
    } 

Regards,
Kharis


#3

Hi Kaharis,

I was already using to make among other the home page menu nice (www.machulp.nu):

@media only screen and (min-width: 767px) {
.site-logo {
max-height: 70px;
margin-top: 15px;
}}  
@media screen and (max-width: 960px) {
#header_front { display: none; }
}
.slide-item,
.panel-row-style {
    background-position: initial !important;
    background-attachment: scroll !important;
}
    @media only screen and (max-width: 800px) {
      .site-logo {
        max-height: 50px;
      }
    }
#mainnav ul li a:hover {
	color: #2a71c3;
}
@media only screen and (min-width: 992px){
.site-header:not(.float-header) {
 padding-top: 0 !important;
 padding-bottom: 0 !important;
 height: 0;
 overflow: visible;
 }
}
@media only screen and (min-width : 240px) {
   .wpcf7-textarea,
   .wpcf7-text {
     max-width: 100%;
     padding: 10px 1px !important;
   }
}
.go-top.show {
    display: none;
}
.preloader{
  opacity: 0 !important;
  display: none !important;
}
.panel-row-style { background-size: cover !important; }

.scrolling-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
  .card {
    display: inline-block;
  }
.footer-custom-text { font-size: 12px; }

So if I add the code you mentioned it doesn’t work…


#4

Maybe I couldn’t get your objective correctly. To make it a bit clearer, please take a screenshot and put some descriptive annotations. Then share it here.

Regards,
Kharis


#5

Hi Kharis,

Thanks for your reply,
I have included a video so you can see what happens. For the homepage we have a transparant background for the menubar. But if you visit a blog post It would be nice if the menubar is not transaparant. Is that possible?

Video: https://cl.ly/2q0C3P2b0b1k


#6

Hello there,

Please find this code in Custom CSS

  .site-header:not(.float-header) {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      height: 0;
      overflow: visible;
  } 

which is wrapped in @media only screen and (min-width: 992px) media query.

Then remove this line:

  height: 0;

Let me know how it works for you.

Regards,
Kharis


#7

Hi Kharis,

I see! But I only want this for blog posts. Maybe that is not possible?

For example for this blog post: https://www.machulp.nu/nuttige-tips-voor-elke-mac-gebruiker/

Another solution is to remove the white space above the blue row. Is that possible?


#8

Hello,

Try replacing your code with this one, please.

    body:not(.single-post) .site-header:not(.float-header) {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
          height: 0;
          overflow: visible;
    }  

Regards,
Kharis


#9

Thanks!!! That works. It looks way better now.
:blush:


#10

Is it possible to remove the gray space above the text for single posts on mobile?



#11

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
      .page-wrap {
        padding-top: 0;
        padding-bottom: 0;
      }
    }

Regards,
Kharis