Home › Forums › Free Themes › Travel Insight › Hiding Header Image Everywhere
Tagged: css, header, header image
- This topic has 30 replies, 2 voices, and was last updated 4 years, 6 months ago by wensolutions.
-
AuthorPosts
-
January 2, 2020 at 9:13 am #112968ExtinctDisneyParticipant
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 #113015wensolutionsKeymasterHello,
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 #113203ExtinctDisneyParticipantHiding 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 #113225wensolutionsKeymasterHello,
Glad we could help you.
If you have further queries, let us know.
Thank you.
January 7, 2020 at 10:47 am #113261ExtinctDisneyParticipantUnfortunate 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 #113295wensolutionsKeymasterHello,
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 #113574ExtinctDisneyParticipantOnce 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 #113613wensolutionsKeymasterHello,
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 #113645ExtinctDisneyParticipantMuch sadness… that doesn’t appear to work. 🙁
January 10, 2020 at 6:57 am #113647wensolutionsKeymasterHello,
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 #113652ExtinctDisneyParticipantSure! 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.
January 13, 2020 at 12:50 am #113777wensolutionsKeymasterHello,
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 #113815ExtinctDisneyParticipantOddly, 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 #113858wensolutionsKeymasterHello,
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 #114189ExtinctDisneyParticipantThanks 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?
-
AuthorPosts
- You must be logged in to reply to this topic.