How to hide Banner image on non-Home pages

[Alfredo Jahn]

Just installed Pure & Simple and am using the child theme. I added a Banner image using Appearance >> Widgets, then I added the Image widget to the Banner. I then selected a 1200 x 300 banner image. Looks great on Home page, but now when I click on another page from the menu bar, and the banner image is on that page. I only want the banner image on the Home page. This seems to work differently than the older version of Pure & Simple I used before.

Any ideas?

Thanks

[Bidur]

Hello Alfredo,

There are several ways to do that. The simplest way for instance is you can add custom css.
Please add the following css inside the additional css section of your customizer or child theme’s style.css file;

#page-banner {
display: none;
}
.page-id-16 #page-banner {
display: block;
}

Note: Please inspect your home page and put the page-id accordingly.
Let us know if that works.

Thanks!

[Alfredo Jahn]

Bidur,
Thanks for the reply. Little confused. what page has the class page-id-16? Is “display: block” not showing the banner? don’t I need to have something that says “if it isn’t the main page, block the banner”? How do I add the “page-id” to my page?

Thanks

[Bidur]

Hello Alfredo,

You can simply customize your css.
The Page ID is the URL number i.e each page has unique ID. You can refer: https://www.competethemes.com/blog/find-page-id/
In that sense you can display the banner image on particular page/s only.
Block is simply a value for css property i.e display to display your element as a block.

[Author]

Posts