CSS removed banner event image but hides the navigation menu

Site URL: https://www.firstblessing.org/2022-events/2022/6/25/west-university-church-of-christ-houston

I have added the following CSS to remove banner images from my individual events.

.collection-type-events.view-item .banner-thumbnail-wrapper {
    display: none;
}

However, it  also changes the solid gray header background to white making it seem like my navigation menu has disappeared even though it hasn't. The event text is moved up into the header area - you can barely see the top of it overlaying the text "must be registered individually". 

Question is how do I modify the CSS to restore the solid gray header and move the event content down so you can see the navigation menu as shown on this page - https://www.firstblessing.org/2022-events

Try replace display: none; with

visibility: hidden;

Tried that and it fixed the issue with the event item being in the header space. Is there a way to either change the font color specifically for event item pages or to change the color of the header background? As it is now, the navigation menu is still there but can't be seen because it's white font on a white header background.