Jump to content

Customize page for search results

Recommended Posts

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.

 

 

Screen Shot 2023-03-20 at 10.22.14 AM.png

Link to comment
  • Replies 1
  • Views 167
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

image.thumb.png.64667a04911b975d1a7d6a063fe83bef.png

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.