Home › Forums › Free Themes › Travel Insight › Hiding Header Image Everywhere

Tagged: , ,

Viewing 15 posts - 1 through 15 (of 31 total)
1 2 3
  • Author
    Posts
  • January 2, 2020 at 9:13 am #112968
    ExtinctDisney
    Participant

    I would like to disable the header image on all pages and posts. I am sure there is something I can add to “Additional CSS” to do this but everything I’ve tried has failed. Huge thanks in advance!

    January 2, 2020 at 11:49 pm #113015
    wensolutions
    Keymaster

    Hello,

    As per your query regarding the header image, you can remove the whole section by adding CSS to the Additional CSS section. You can add the given CSS,

    section#banner-image {

    display: none;
}

    Also, if you are willing to only hide the image then you can follow the path, Appearance > Customize > Header Image and either hide or upload the image as per your requirement.

    Hope this will help you.

    If you have any queries further, let us know.

    Thank you.

    January 6, 2020 at 11:14 am #113203
    ExtinctDisney
    Participant

    Hiding the image seemed to just force it to use the default image for whatever reason but… thank you so much for the reply as the CSS did the trick!

    January 6, 2020 at 10:27 pm #113225
    wensolutions
    Keymaster

    Hello,

    Glad we could help you.

    If you have further queries, let us know.

    Thank you.

    January 7, 2020 at 10:47 am #113261
    ExtinctDisney
    Participant

    Unfortunate side effect of doing this that I just noticed… the post/page title is now no longer at the top because it was ultimately part of the header image section. Is there by chance a way to modify the css I added to still show the page/post title in some way?

    January 7, 2020 at 11:48 pm #113295
    wensolutions
    Keymaster

    Hello,

    To display the page/post title the same as it is and removing the header image, you can follow path Appearance > Customize > Additional CSS and give the CSS given below :

    #banner-image {
    background-image: none !important;
    padding: 50px 0 0;
}
.banner-title {
    background: transparent;
    border: none;
    padding: 0;
    width: 100%;
}
.banner-title .page-title,
.breadcrumb-trail.breadcrumbs ul li a {
    color: #000;
}
.breadcrumb-trail.breadcrumbs ul li {
    color: #888;
}

    Hope this helps.

    If you have further queries, let us know.

    Thank you.

    January 9, 2020 at 8:52 am #113574
    ExtinctDisney
    Participant

    Once again huge thanks! This did exactly what I needed. The only question I have remaining is, how do I modify the space/padding between the title and the post content?

    January 10, 2020 at 12:37 am #113613
    wensolutions
    Keymaster

    Hello,

    To get the space between the title and the post content, add CSS following the path Appearance > Customize > Additional CSS :

    div#wp-travel-content {
      padding : 30px 0;
}

    You can replace the padding 30px with space you required.

    Hope this helps.

    Thank you.

    January 10, 2020 at 6:39 am #113645
    ExtinctDisney
    Participant

    Much sadness… that doesn’t appear to work. 🙁

    January 10, 2020 at 6:57 am #113647
    wensolutions
    Keymaster

    Hello,

    We would like to apologize for misunderstandings.

    Can you please provide us with specific screenshot of the section where you are willing to modify the space/padding?

    Also, please provide us with site URL so that we can provide you with custom CSS.

    Regards.

    January 10, 2020 at 7:32 am #113652
    ExtinctDisney
    Participant

    Sure! I’m waiting on a domain transfer to happen so, this URL may only work for a day or two (it’s temporary). I am looking to reduce the space between the title/breadcrumb and the content below it.

    https://pld.kvs.mybluehost.me/horizons/

    January 13, 2020 at 12:50 am #113777
    wensolutions
    Keymaster

    Hello,

    To reduce the space between the title/breadcrumb and the content below that, you have to add below-given CSS following the path Appearance > Additional CSS :

    .single .wrapper{
    padding-top: 0px !important;
}

    Hope this helps.

    Thank you.

    January 13, 2020 at 8:45 am #113815
    ExtinctDisney
    Participant

    Oddly, that doesn’t seem to do it. That said, I think I’m getting used to the space that’s there and will just stick with it for now so no huge rush on figuring it out but… would definitely like to control it. 🙂

    January 14, 2020 at 2:30 am #113858
    wensolutions
    Keymaster

    Hello,

    Actually, the space below the breadcrumb is the space allocated for banner image. Due to the CSS ‘background-image: none !important;’ which has been used in your site has disabled the banner image so the more space has been appearing below breadcrumb.

    Also, if you want to reduce the space between breadcrumb and content, you can add following given CSS code in Additional CSS section by going to Admin Panel > Appearance > Customize > Additional CSS

    .single .no-padding-bottom{
    padding-top: 0px !important;
}

.single #banner-image .banner-title{
    padding-bottom: 0px;
}

    Hope this helps.

    If you have any queries further, let us know.

    Thank you.

    January 17, 2020 at 7:42 am #114189
    ExtinctDisney
    Participant

    Thanks again for the reply. So, just to be clear, because I’m hiding the image there’s not really anything I can do about the space that’s still there?

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 31 total)
1 2 3
  • You must be logged in to reply to this topic.