Change header background color and font color for Events / Blog

Site URL: https://elizahopekenyon.squarespace.com/events/solstice-breathwork-ceremony

Hi Guys, I really need help with background header colours / header font colours on Events and Blog pages. 

I'm on 7.1 and I want a transparent white logo / white navigation on most of my pages (home / about / service etc-) because I'm using dark blue header images on those pages. So I have set the header to 'Transparent.' 

However on the events and blog pages, I want a white background so the text is easier to read (due to long paragraphs of text). However, once I choose the colour "White Bold" for the blog or event pages ... my white logo 'disappears' and the navigation turns grey. 

So I would really love to find a way to set my header bar on these pages to this colour #173D5C (so my white logo shows up and I would love the font navigation / social media links to also be white). Does anyone know how to do this? Please help! 

Can you share access password?

Yes it's "turbo123"

Add to Home > Design > Custom CSS

.collection-type-events-stacked.view-item header#header {
    background: #173D5C !important;
}
.collection-type-events-stacked.view-item header#header * {
    color: white;
    fill: white;
}

Thanks so much Tuan! It looks so much better already!  Just two more questions (hope that's ok!) ... 

1) I noticed when I scroll, the header colour block stays there but the  links and logo all go. (See attached scerenshot). It would be great if the navigation bar could go when people scroll down and pop back up when they scroll up (sorry I don't know what it's called). 

2) And would it be possible for you to give me the code for the News / Blog page as well? I want to do the same thing ..

https://elizahopekenyon.squarespace.com/news

https://elizahopekenyon.squarespace.com/news/blog-post-title-one-44b24

THANK YOU SO MUCH!