.entry-title {
display: none;
}
.twentyseventeen-front-page.has-header-image .custom-header-media{
height: 700px !important; // set your height
}

It looks good on the PC, but it shows a grey background area between the Menu and Page Title on mobile and tablet view.

Is there a way to remove the grey background?

I see you created this topic a long time ago, but I see you’re still facing this issue, so maybe I can help you here. ??

An option would be to change your existing CSS.

You can go to WP Admin > Appearance > Customize > Additional CSS, then change what you have to the following:

/* Change header format */

.entry-title {
  display: none;
}

@media screen and (min-width: 1024px) {
  .twentyseventeen-front-page.has-header-image .custom-header-media {
      height: 700px;
  }
}

Apart from that, if you use one of the new WordPress default themes (like Twenty Twenty-Three), you would be able to edit this directly from the Site Editor without using any code.

But the desktop/laptop view switched back to large size again, and the page title and menu bar slide below the fold again. I liked it visible above the fold.

This is the code I had already in my CSS area to resize the desktop/laptop view:

.entry-title {
display: none;
}
.twentyseventeen-front-page.has-header-image .custom-header-media{
height: 700px !important; // set your height
}

Is there code that makes the header image smaller in the desktop view AND eliminates the grey bar in the mobile view?

Thanks,

Stefanie

Sure, always a pleasure.

Basically, the CSS that I sent should do something like that.

It should keep the identical CSS that you had before but apply only when the width is more than 1024px.

It is possible that it is not applying because of the !important there, or because of caching.

Can you try to add the following instead?

/* Change header format */

.entry-title {
  display: none;
}

@media screen and (min-width: 1024px) {
  .twentyseventeen-front-page.has-header-image .custom-header-media {
      height: 700px !important;
  }
}