Jump to content

Hiding Banner on Search Page

Recommended Posts

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.

Edited by TerrySilver
Link to comment
  • Replies 11
  • Created
  • Last Reply

Top Posters In This Topic

@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 

Edited by tuanphan

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 6 months later...

@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.

 

 

Logo on search page with no results, message cannot be read.png

Logo on search page with results.png

Logo on page with injecetd code.png

Link to comment
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 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.