Random Gray Bar under Header Image

Hi Ariana,

The grey bar is in fact the overlay behind your menu and logo. The grey overlay makes the text in your menu a little more readable on top of your featured image, and I don’t recommend removing it.

It’s appearing beneath your image as the CSS you added reduces the header area’s height so that it’s smaller than the overlay.

Could you perhaps try replacing the custom CSS you added with the CSS I suggested here? The CSS I suggested can be used with an existing featured image on your site and will hopefully achieve the effect you’re after without this unintended side effect.

Thanks!

Hi Sioghan,

My issue isn’t with the gray it is with the extra gray that shows under the header image on internal pages where I’ve added the custom css as I described in the other post… See here how there is extra gray under the image before the page title – https://celebratebalfour.org/about/

Basically I just want to know how to adjust the height of the gray so that it covers the image but does not go under it?

Thanks!
Ariana

Hi Ariana,

The height of the grey overlay is determined by the height of the content in your header (your logo and menu). If you removed your logo, you’d see that the overlay would take up less height and no longer exceed the height of your featured image.

Alternatively, you could set a height for the image:

.hero-image .hero.with-featured-image {
    background-size: 100% 245px;
}

Increase/decrease the value of 245px to increase/decrease the height of the image.

Let me know if that helps out!

Hi Siobhan,

I’ve given this a try but am still seeling this issue. Here is a screenshot so you can see what I am seeing: https://celebratebalfour.org/wp-content/uploads/2016/11/Screen-Shot-2016-11-05-at-2.51.30-PM.png

I will note that if I pull the side of my browswer window out to make it larger or smaller, the header overlay area appears to jump to a new size but that size is shorter than the header image. Here is a screenshot of that: https://celebratebalfour.org/wp-content/uploads/2016/11/Screen-Shot-2016-11-05-at-2.52.43-PM.png

Thanks,
A

Hi A,

I can confirm that I’m seeing the same as you on my end, too.

Which specific step did you try from my last reply? I’m able to solve the issue by reducing the height of the image to 175px in my browser’s inspector:

.hero-image .hero.with-featured-image {
    background-size: 100% 175px;
}