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>

@tuanphan thanks for this... is it possible to also have the hamburger navigation menu on mobile to keep the desired color in the search result page on mobile? ... please see this: https://www.charge-volt.org/search?q=europa

On 5/13/2024 at 3:22 PM, Dirksonic said:

@tuanphan thanks for this... is it possible to also have the hamburger navigation menu on mobile to keep the desired color in the search result page on mobile? ... please see this: https://www.charge-volt.org/search?q=europa

Add this code under

<style>
  .t-search:not(.header--menu-open) .burger-inner>div {
    background-color: #502379 !important;
}
</style>

@tuanphan Super! Thanks a lot. 💯