Customize page for search results

Hi! On my site, I put a header injection code on the homepage ONLY to make the navigation appear below the first section. It works great, but the only issue is on the page where search results show, the nav appears below the search results (where it should appear on the top as normal). I'm assuming this is because it defaults to the homepage styles. Anyone know how to fix this? Thanks!

Here's the code injection I used on the homepage only:

<style>
@media screen and (min-width: 768px) {
#header {
  position: sticky;
  top: 0;
  display: none;
  z-index: 10000;
}
main .page-section:first-child + #header {
  display: block;
}
main .page-section:first-child {
  min-height: calc(100vh - 68px)!important;
}
}
</style>

Site is https://monahan-demo.squarespace.com, password is bold. Also attached a screenshot.

You used this code, it causes problem, this code to change position of Header - First Section on all Pages

If you need to do this on One Page, please move that code to Page Header only, don't add it to Site wide Code Injection.

In case you need to add it to Site Wide Code Injection, To solve this, try Add this code to Settings > Advanced > Code Injection > Footer

<script>
  if (document.location.pathname.indexOf("/search") == 0) {
    document.querySelector('body').classList.add('t-search')
}
</script>

then change your code to this

<script> 
document.addEventListener("DOMContentLoaded",function() {
    const header = document.getElementById('body:not(.t-search) header');
    const firstSection = document.querySelector('body:not(.t-search) .page-section:first-child');
    firstSection.after(header);
});
</script>