How do I get rid of the empty space at the top of posts and pages?

Hi. Wondering how to lose the large white space (and the yellow dot) that appears above the featured pic at the top of every post and page that I create. I’ve include a couple screen grabs. The “Before” pic is what it looks like now. Trying to get it to look like the “After” pic.

Awesome theme, btw! Thanks for your help.

Hello @nickperry,

First of all, thank you for the kind words.

Try using this CSS solution to hide the page and posts header, it should work like a charm:

.page .bottom-header,
.single .bottom-header{
display: none !important;

This code should be placed in a child’s theme stylesheet.css, ideally.
But you can use a custom CSS plugin or place it inside Dashboard > Appearances > Editor > Style.css but keep in mind that this will get erased if you update the theme.


Thanks for the CSS. I used the CSS Stylesheet Editor and it fixed the problem on posts and pages but it removed most of the cover photo on the front page :frowning:

Is there a way to eliminate the empty spaced about the posts/pages and not effect the front page photo?

Thanks, Nick


Try using the above code and additionally add this after it:

.home .bottom-header{
display: block !important;

Should do the trick.


Worked like a charm, thanks! Is there a piece of code that can bring everything up couple lines? To go from what it looks like currently (Current pic) to this (After pic).

Thanks again!

Hello Nick,

Would it be possible to get the site out of development mode so I can have a live preview?
Or better yet, provide me temporary access via a private message if the above is not possible?


Hi. I’ve deactivated Maintenance Mode if you want to check it out. Thanks!


Hello Nick,

I can only suggest that you should keep the header in place and make it display.

If a header background picture from the customizer does not fits the design, you could try to make the menu items black:

#header .top-header .header-navigation ul li a {
    color: #000;
.home #header .top-header .header-navigation ul li a {
    color: #fff;

You can also just delete the header and reduce that space, except for the homepage:

display: none;
.home #header{

I hope this works alright for you, it’s a little difficult to debug this without access to dashboard or your exact thoughts about the design.


Thanks! The last block of code worked like a charm.