Help to change color of header on Search page?

Hello there,

If you go to my site: https://activestatedesigns.squarespace.com/search?q=sunset (password: SiteTest) the header SHOULD be blue (#2C4F6D) like it is on my other pages.  But it's white, so my White font in my logo is not seen.  How can I fix this for only Search page?  Each initial page (before scrolling) the header is invisible except when on hover.  It's blue at all other times.  

Thanks,

Lorne

Anyone able to help with CSS for this?

Add to Settings > Advanced > Code Injection > Footer (DO NOT ADD TO DESIGN > CUSTOM CSS)

 <script>
if (document.location.pathname.indexOf("/search") == 0) {
    document.querySelector('body').classList.add('t-search')
}
  </script>
<style>
  .t-search header#header {
    background-color: #2C4F6D !important;
}
</style>

Thanks @tuanphan, super helpful.  Last question, how do I get the font and social icons to be white?  I tried adding color css to that style code and it didn't work?

On 2/3/2023 at 8:28 PM, Lorne17 said:

Thanks @tuanphan, super helpful.  Last question, how do I get the font and social icons to be white?  I tried adding color css to that style code and it didn't work?

Add this code under

<style>
  .t-search .header-nav-item a {
    color: white;
}
.t-search header#header svg {
    fill: white;
}
</style>