Five: Remove banner image on individual pages.

I've seen a lot of answers for this online but can't seem to get any of them to work. On some pages I'd like to remove the banner image, but not for all. When I add code like #collection-53210a78e4b0af19e7e35792 #banner-area-wrapper { display: none; } in the Code Injection Header section or directly into the advanced tab in page settings it just ends up displaying in the upper left corner of the page.

Am I putting in the right code and am I putting it in the right place? Other CSS I've used works fine but this one in particular is not cooperating. Thanks!

I'm not sure why but this made my navigation and content disappear too.

Add a closing angle bracket to the final style tag. Somehow I got a dot there by mistake.

Thank you that worked perfectly!

I'd like to share a solution that will display the banner image if it has been added to the page and hide it if not (this is for the Five template).

First, add the following line of CSS to your Custom CSS:

#page-header #banner-area-wrapper #banner-area {display:none;}

Then, add the following javascript to your Footer Code-Injection:

<script type="text/javascript"><!--
$(window).load(function()  {
 var banner = $('#page-header #banner-area-wrapper #banner-area #page-thumb img');
 if (banner.length) {
     banner.parents('#banner-area').show();
     banner.each(function(img){ImageLoader.load(this);})
   }
});
//--></script>

This assumes you've already included jQuery, of course.

the simple solution does work (it didn't for me), but you need to add !important
I just pasted this into settings>advanced> code injection directly on the blog:

<style>
#banner-area-wrapper {display: none !important}
</style>

now it works and the banner is gone just on the blog.

Ive tried so many codes and it has yet to work..please help :(

The suggestion above worked perfectly for me!

I'm trying to do this using the Montauk template but it won't work. Has anyone had any luck with this one?

Same issue with my site too (using the Montauk template). Any help would be appreciated. I need the Banner image on my homepage but not on other pages. Here's the sitewww.firstdaycreative.com

For template Alex this solution for a certain page worksInsert to a page header in settings:

 <style>    
          #header-wrapper > div.title-desc-wrapper.has-main-image   {display: none !important}        
</style>

Check on my site on https://catherinewoolf.squarespace.com/ Home and Calender pages

HI everyone,

Can someone please tell me how to hide the banners in the Shift template? I have attempted the above codes and it doesn't seem to work. Am I doing something wrong? The solution seems simple, but for some reason I can't get it to work. I"m a total beginner with CSS, so maybe I am missing a step other than simply copying and pasting above into header settings.

Please help :)

@SVA7SVA do you know?

@krustelkram do you know?

Thank you! worked perfectly!

@SVA7SVA

I have the SKYE template and you're only allowed to have a thumbnail image that matches your banner. They don't allow a separate banner image. I was wondering if you could set a thumbnail for a specific blogpost that doesn't display as a banner image without affecting the other blogposts where you DO want the thumbnail to display as the banner image. Thanks

Helllo Everyone,

i was very confused to hide the banner image and try to make the code but not successed then i concern with the very professional web developer that helps me as more as i need. Try to contact with them if you have any issues in your website .

Thanks

The following code worked best for me in Custom CSS on the Five Template:

#cart #banner-area-wrapper {display: none}

Hey, I'm using the Five theme and would like to remove the banner on specific pages:

https://www.mosaicartgallery.com/classic-mosaic-mirrors/https://www.mosaicartgallery.com/signature-mosaic-mirrors/https://www.mosaicartgallery.com/scenic-mosaic-mirrors/

How do I target these pages only within the css?

Thanks so much! x

Try this code:

<style>
  .page-banner-wrapper {display:none;}
</style>

dsnvee

Your code was the only one that worked for me! Thank you. 

Hi ! I am looking to hide banner image on one specific page on mobile only. Can anyone suggest how to achieve that? This is the page whose banner image i need to hide on mobile.

2 hours ago, divar said:

Hi ! I am looking to hide banner image on one specific page on mobile only. Can anyone suggest how to achieve that? This is the page whose banner image i need to hide on mobile.

If you share link to your site, we can check easier.

Hey Tuan, forgot to post the link in the original post. I want the banner image to not display when viewing on mobile. 

https://www.erheer.com/our-story

Thanks for taking a look at this!