Hiding Banner on Search Page

Website: https://caterpillar-tulip-78l5.squarespace.com
Access Password: c0di$

Hi. I am using the Five template. If I enable banners to appear at the top of every page, it also appears at the top of the search page: 
https://caterpillar-tulip-78l5.squarespace.com/search

I would like to hide it from the search page only while still having banners on the other pages of the website.

I was previously supplied this piece of code however it does not work for me as I first thought:

/* Remove banner search page */
2. body#yui_3_17_2_1_1568971484861_71 #banner-area-wrapper {
3.     display: none;
4. }

Thanks,

Terry.

@TerrySilver #yui... is dynamic ID. I will change. It will change every time you reload the page, so the above code will only work once. (Looks like I provided the code :-/)

Each Page has a unique ID, but it looks like Search Page doesn't have that.

My solution now is
+ Use custom code to hide Banner on the entire website (eg. #banner-area-wrapper { display: none; })
+ Use Custom Code to show banner on other pages (except search page). This will need to target each specific page. (

.page1 #banner-area-wrapper, .page2 #banner-area-wrapper { display: block; }

Do you have many pages on the website?

If there are too many pages, this solution seems to be time consuming and type a lot 

@tuanphan

Hi Tuan, it was indeed you who supplied the code in SquareSpace Answers ;o)

I was hoping to find you again.

We don't have a great deal of pages, so I'm thinking your second solution might work for us. Do I add the code in CSS and exactly how you have written above?

@TerrySilver Each page has different ID (body#collection.....115e). See how to find Page ID. https://beaverhero.com/squarespace-how-to/#How_to_Find_Page_ID

You can use the following code to remove Banner in Search Page.

/* Hide Banner - Entire Site */
#banner-area-wrapper {
  display: none;
}

/* Show Banner */
body#collection-5d5a64f8e3a3b00001b5115e #banner-area-wrapper, body#collection-5d5a97e7610bb30001f01032 #banner-area-wrapper {
  display: block;
}

@tuanphan

Thank you for this but when I View Source or Inspect Element for a page, it doesn't have a "body id" anywhere!?!?

@TerrySilver Most pages will have, except for the search page

@tuanphan

Thank you Tuan. I've managed to find it and I can confirm this code has worked perfectly. 

Thanks for your help.

@TerrySilver You're welcome. You can Accept Answer (Like) & Vote Up. Thanks.

@tuanphan

Hi Tuan,

I will do - one final question - is there anything I can add to the code so it displays an image if I was to upload in the banner settings? Currently it does not display any image uploaded in banner settings.

@TerrySilver I don't know. You can create a new question to get help from other members

@tuanphan I'm having similar issues. Hope you can help me...

My logo is set to 600px by default in order for a scrolling effect to happen. Since I only need the logo to be that big for the scrolling effect in my homepage, I've injected this code in every single page but the homepage:

<style>
.Header-branding {          
max-width: 190px;    
max-height: 190px;    

  }
</style>

I can't find a way to inject the code in the search and search result pages. I'm having a hard time because without it, the logo is huge and I cannot see the "no results" message nor the first result of any search query.

8 hours ago, gbmarck said:

@tuanphan I'm having similar issues. Hope you can help me...

My logo is set to 600px by default in order for a scrolling effect to happen. Since I only need the logo to be that big for the scrolling effect in my homepage, I've injected this code in every single page but the homepage:

Add to Home > Design > Custom CSS

body:not(.homepage) .Header-branding {          
  max-width: 190px;    
  max-height: 190px;    
}

It will affect all, exclude homepage