Remove gray space after moving menubar above header in twenty seventeen theme

In the same “Additional CSS” option, look for this style:

#content {
padding-top: 35px;
} 

Try removing that. Does the issue persist?

Thankyou! The problem with the front page is solved.
But the problem with post page still persists.

There is still that gray bar between the Menu-bar and the content section (Post-Page).

The Page code is 78. I am sorry I am yet to publish my first post so I am unable to provide a url. Since I am only previewing it.

I’m not sure I can find a post page, can you provide a link to one example?

I guess this gray bar is the area where the menu-bar was by default. Right under the header image.

https://tecfinds.com/2017/10/19/a-sample-post/

Here is a link to example.The gray area right under the menu bar.

I could be looking at the wrong space, but I think adding the following CSS will resolve it:

@media (min-width: 760px) {
    .single .custom-header {
        padding-top: 0;
    }
}

• This reply was modified 7 years, 4 months ago by Andrew Nevins.

It worked perfectly! Thank you so much!
Could you please also help with these things:

1) Moving the logo to the menu-bar just on far left i.e before the menus and make it round.
2) Changing the color scheme around the theme with a specific color since customiser option to do this is lacking in color.
3) Changing the color of links and underline in posts including hover color.
4) Moving the search bar on menu bar to the right with making it less in height.

Absolutely, but I would recommend creating a thread for each problem. This helps people find the problems and solutions in future.

Sure! That is a great idea!
I am going to create new threads for each.

The problem was solved for the posts but on pages there is still that gray bar.
How can I get rid off that gray bar from pages.
Here is the example page link:
https://tecfinds.com/a-sample-page/

Instead of this:

@media (min-width: 760px) {
    .single .custom-header {
        padding-top: 0;
    }
}

Try this:

@media (min-width: 760px) {
    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header {
        padding-top: 0;
    }
}

Thankyou it worked!
But on mobile site the front page still shows gap underneath the header image.
I fixed header with the code you had given in another thread. The problem was solved but the space below the header and on the right side of the homepage still remains on mobile version.

Can you please look into that?

Here’s the code I used:
@media screen and (max-width: 480px) {
.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding,
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header { height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}

.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding,
.custom-header-media,
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
position: static;
}

.custom-header-media:before {
background: none;
}

body.has-header-image .site-description,
body.has-header-video .site-description {
color: #222;
opacity: 1;
}

.site-branding .wrap {
padding: 0 1em;
}
}

Try adding this CSS:

.has-header-image .custom-header-media img {
    display: block; 
}

Thanks it worked! But there is still space a tiny bit.