Remove Jumbotron From Additional Pages

Hi, I love the theme and I like having the jumbotron on the homepage but I want to be able to remove it on all additional pages. (I know Illdy was designed as a one-page but I’ve gone this far with it now that I need to make it work.) Having searched the forums I have already tried:

  1. Removing the header images in Customizer > Blog Options > Blog Archive Header Image. That left the title and a plain coloured background but the box is the same size.

  2. Using the following Additional CSS (with the correct page ID inserted). That did nothing at all.

/Remove header on a page/
.page-id-xxx #header .bottom-header {
display: none;
}

The main issue is that the jumbrotron/header/title is taking up far too much of the screen so I would ideally make the box shorter and keep the title on the page. But, if that is not possible, I would like to remove it completely from all pages except the home page.

Any help you can offer would be much appreciated!

Rachel

Hello Rachel

There is no jumbotron section for pages other than the homepage, most probably you are talking on something else and this is page title, please always include a link to the example page in your question

Hello Noda,

Thanks for coming back to me.

Yes, sorry. Used the wrong phrase, but I am referring to the page title or specifically the box/section/header that the page title is in.

Here is a link to an example: Blog | The Stitch Sisters.

I hope you can help and look forward to hearing from you.

Rachel

Hello,

I hope you are doing well today.

You can use the following CSS code to reduce the space by going to Appearance > Customize > Additional CSS and pasting it there.


#header .bottom-header.blog {
    padding: 50px 0;
}

Best Regards,
Support

Thank you! That worked great.

I actually reduced the padding to 20px as that is closer to the size I was looking for. Is there any way I can reduce the padding above the title as well? So that it is the same above and below? Would I need to reduce the padding on the top menu or logo area for that to work?

Here is how it looks now so you can see what I mean: https://www.thestitchsister.co.uk/blog

Thanks again,
Rachel

sorry, forgot an ‘s’ - should be Blog | The Stitch Sisters

GOod evening

Try this one:

#header .bottom-header.blog {
padding: 0px 0px 10px 0px;
}
#header .top-header {
padding-bottom: 0px;
}