Removing or Minimizing the "Header" below the Header

Shapely
1

(forgive me if I’m using the wrong terminology)…
I have the header with the name of my site and the menu across the top (this is referring to the desktop display, not mobile.)
Below that and before the page content is like another header, I called it a 225 pixel high wasteland. Is there a way to remove or at least minimize it to maybe 10 pixels?
On my site it is just wasting space. I’ve attached a screen shot that outlines the area I’m talking about.
The page (it applies to all pages) is https://transfiguredhearts.com/blog-archive/
Thank you!!!

2

Hi,

Go to Appearance -> Customize -> Additional CSS and add this,

.page .header-callout { display: none; }

Let us know,

Thanks,
laranz.

3

That did it for all the pages! Is there a way to do the same on the blog page and the posts? (You are awesome Laranz, you know that don’t you!)

4

Hey there

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

/*hide header on blog */
.blog .header-callout { 
  display: none; 
}

Best Regards,
Support

5

And that did the job for the blog page!
Any way to also do it to the individual posts? (I apologize for not being more clear in the beginning.)

6

Hello there,

In order to use this on an individual post, you need to add the post id number to the CSS selector. Here is the CSS code, all you need to do is change the id number and the code will only work for that page.

/*Individual page*/
.page-id-662 .header-callout { 
  display: none; 
}

Best Regards,
Support

7

Thank you, but is there a single CSS entry I can make that will cover ALL posts?

8

Hi,

Do this for all the posts,

.single-post .header-callout { 
  display: none; 
}

Let us know,

Thanks,
laranz.

9

Perfect! (again)

Thank you!!!