How to target elements in header on search page?

Site URL: https://mouse-trout-epjy.squarespace.com/search

Hi, 

I am trying to invert colour of the logo on my header on the search page (I have managed it on other pages eg cart, products etc) and also invert the CTA text colour in header too. 

this is the code I have for changing both on cart page: 

body#cart .header-title-logo img {
	filter: invert(1); 
	-webkit-filter: invert(1); }

body#cart .header-actions-action a {
     color: #000000 !important;

}

so I know this works on the cart page but I can't get it to work on the search page, have tried targeting .sqs-search-page and body#search but those don't work. am I just targeting the wrong thing? 

does anyone know how to solve this? 

site: https://mouse-trout-epjy.squarespace.com/search

pw: spong123

Great question, Spongebob!  (that's a fun sentence to write)

I couldn't find any unique classes on the search page we can target, so we'll have to add one through Javascript. Add this to your  Settings » Advanced » SITE Header Code Injection area

<script>
  if (window.location.pathname == '/search'){
    document.querySelector('body').classList.add('sqs-search-page')
  }
</script>

What this code is doing is checking the URL of the page and if it ends in '/search' then we're going to run that function below which adds a class of 'sqs-search-page' to the body of the HTML. So make sure you have this in your Custom CSS area. 

.sqs-search-page .header-title-logo img {
  filter: invert(1);
  -webkit-filter: invert(1);
}
.sqs-search-page .header-actions-action a {
  color: #000 !important;
}

Let me know if that does it!

21 hours ago, WillMyers said:

Great question, Spongebob!  (that's a fun sentence to write)

I couldn't find any unique classes on the search page we can target, so we'll have to add one through Javascript. Add this to your  Settings » Advanced » SITE Header Code Injection area

<script>
  if (window.location.pathname == '/search'){
    document.querySelector('body').classList.add('sqs-search-page')
  }
</script>

What this code is doing is checking the URL of the page and if it ends in '/search' then we're going to run that function below which adds a class of 'sqs-search-page' to the body of the HTML. So make sure you have this in your Custom CSS area. 

.sqs-search-page .header-title-logo img {
  filter: invert(1);
  -webkit-filter: invert(1);
}
.sqs-search-page .header-actions-action a {
  color: #000 !important;
}

Let me know if that does it!

Aha! that seems like a great solution...unfortunately it hasn't worked 😞 any ideas? 

ps. spongebob name comes from a client who typed it instead of squarespace 😂

@WillMyers is it possible I haven't loaded libraries correctly? I have the following already: 

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

4 hours ago, spongebob-smc said:

ps. spongebob name comes from a client who typed it instead of squarespace 😂

😂😂 That is amazing...

Looks like my code is firing before the body is loaded. Let's add an event listener to wait until the entire page is loaded, then run the code. 

<script>
  if (window.location.pathname == '/search'){
    window.addEventListener('load', function(){
      document.querySelector('body').classList.add('sqs-search-page')
    });
  }
</script>

Let me know if it's still giving you issues. 

@WillMyers that worked! thank you so much you are amazing 😊 

Hi @WillMyers - when on a personal plan you can't access Advanced Features. A few years on from this post, is there another solution now, to invert the logo on a search page (with Custom CSS vs Code Injection), please?

On 3/18/2021 at 6:12 PM, WillMyers said:

 

😂😂 That is amazing...

 

Looks like my code is firing before the body is loaded. Let's add an event listener to wait until the entire page is loaded, then run the code. 

<script>
  if (window.location.pathname == '/search'){
    window.addEventListener('load', function(){
      document.querySelector('body').classList.add('sqs-search-page')
    });
  }
</script>

Let me know if it's still giving you issues. 

1 hour ago, DotcomMarket said:

Hi @WillMyers - when on a personal plan you can't access Advanced Features. A few years on from this post, is there another solution now, to invert the logo on a search page (with Custom CSS vs Code Injection), please?

 

@DotcomMarket Keep the CSS in the Custom CSS area, that should work as normal. 
 

You can place the JavaScript in a Markdown Block somewhere in a section in your Footer area though and that should work. 

It surely did - thank you very much @WillMyers