Banner modifications, titles & padding

Hi!!

FIRST, I’d like to modify the space between the banner on all Pages and the title of the Pages (located below the banner) to reduce the space between the two. This custom CSS worked perfectly to fix my issue (suggested in another thread) but it consequently affected the main image on the Home Page by creating a space above the image, making it look very odd. Is there any way to prevent this code below from affecting the Home Page?

#content .content-area {
padding-top: 10px;
}

SECOND, how do I hide Page titles located in the banner section? I added an image to my website banner and now the title in the banner is hard to read with the image in the background. I still want to keep the Page titles below the banner though. If there’s a way to hide Page titles in the banner only, that would be super. Thanks!!

Hi there

Please provide a direct link to the page and let me know what exactly you want to do on that page, I can generate custom css for you

Thanks

Hi,

Here is the website: www.vanillabeanln.com. Here’s what I would like to do:

  1. on all pages, I would like to hide the title located in the banner at the top of the page (ie, if you go to the « Flavours » page, you will see the title « Flavours » in the banner at the top of the page is hard to read because of the image (image of desserts). I want to hide those titles on all pages so it doesn’t look messy.

  2. on all pages, I want to reduce the empty space between the banner and the page titles located below the banner. For example, if you go to the « Flavours » page, you will see the « Flavours » title below the banner has a big empty space between it and the banner. I would like to reduce the space there so there isn’t so much empty space the two. Maybe you can reduce that empty space by half? I think that would be enough and it would look nice. When I used the custom css that I shared in my previous post, I set the spacing at 25px. I don’t know if your custom coding would be different, but this is just an idea to help guide you.

Thanks!

Hi! Just checking to see if you had any questions about my last message. Let me know :slight_smile:

Hey there

Sorry for the delay:

  1. Add this CSS code in the Appearance > Customize > Additionally CSS:
.header-image-bg .page-title {
display: none;
}
  1. Use this css:
section.content-area {
padding-top: 20px;
}

Thanks

Thank you!! Looks much better.

Thank you too and have a nice day :slight_smile:

Hi

@guzwine solution is already provided in this ticket, please see my reply