Header space too large

[Marc Huiberts]

Hi, anyone who can help/tell me how to make the space where the header image/video is being shown smaller without cropping the image/video?

Like the website is overlapping part of that area (and the featured services being shown a bit higher on the page).

[Andy]

I’m guessing you are referring to the homepage as you mention the featured services being shown too high on the page.

The amount that the featured services overlap with the the large header image area can be changed at ‘Appearance’ > ‘Customize’ > ‘Homepage Settings’ > ‘Featured Services’. Here you will see the ‘Overlap’ setting which is at 180 by default.
Change this to a lower number and it will reduce how much the featured services section is overlapping the large header image area.

[Marc Huiberts]

Hi Andy, thank yo so much for your quick respons. Always very much appreciated.

I know this option that you mention however when I lower the overlap settings the featured services cover the title text instead.

And this ‘overlap’ setting does not automatically work for any other page shown. So when I choose a menu option the new page shows with again a quick huge upper part.

So basically I’d like to make the upper area in general smaller in height.

Looking forward to your reply.

[Andy]

The overlap setting has no affect on other pages. It is only applicable to the homepage as this is the only page with the featured services section.

The hompepage has a widget area named “Homepage Slider/Hero Section”.
If you add content (e.g. a Cover block) to this widget area it will override the large header/image/title area of the homepage only.
If you leave this widget area empty it will default to the site-wide large header/image/title area that is displayed on all other pages.

To make this upper area (the large header/image/title area) smaller, you can add this custom CSS at ‘Appearance’ > ‘Customize’ > ‘Additional CSS’:

.entry-header.with-image,
.archive-header.with-image {
  min-height: 20rem;
}

The standard minimum height is 30rem so this code will reduce it to 20rem (approx 320px).
You can use px values instead of rem if you want, for example:

.entry-header.with-image,
.archive-header.with-image {
  min-height: 300px;
}

If you do reduce the height of this area and keep the homepage featured services overlap at 180, then the featured services will overlap the title even more, so if you want to keep a large overlap of the featured services on the homepage, I would recommend adding your own Cover block to the “Homepage Slider/Hero Section” widget area at ‘Appearance’ > ‘Widgets’.

[Andy]

PS some other advantages of adding a Cover block to the “Homepage Slider/Hero Section” widget area is that you can adjust the height of the Cover block in the block settings, and you can use a video as the Cover background if you prefer a video to an image background, and if you add more than 1 Cover block they will automatically be displayed as a slider.

[Marc Huiberts]

WOW! This was exactly what I was looking for. Great work!

Many thanks.

[Author]

Posts