There’s at least 2 ways you can remove the padding from around your header image.
- You can modify the default CSS code in your style sheet by removing the value for padding.
- Or you can add your header image in your style sheet which is the width you want to it be.
Note: The width for the site container is 1140px so your header image will need to be smaller than this size if your want it to display full width of the site-header area.
1. Remove Padding From Site Header
On line 829 of your child themes style.css file you’ll see this CSS code:
.site-header {
background-color: #76d2c5;
padding: 48px;
padding: 4.8rem;
overflow: hidden;
}Remove the padding from this code and your header image will extend full width of the site header.
You can also change the header background color if needed in the code above.
2. Add Header Image In Style Sheet
Another option is to add your header image in your child themes style sheet using CSS. This assumes you haven’t used the Custom Header option under the Appearance menu in your Dashboard.
.site-header {
background-image: url(images/logo.png);
height: 200px;
}Simply modify the value for the height of your image in the code above. There’s no need to remove the site header padding in this case as your image will over write the default code and extend full width of the site header container.
Note: It won’t extend full width of the site container.
Remove Padding From Site Inner
.site-inner {
clear: both;
padding-top: 0px;
padding-top: 0rem;
}This will remove the space under your header image.
Folks,
If you are having issues and running a CDN (i.e. Cloudflare), don’t forget to purge both your server cache and the CDN’s cache. It works like a treat.
Thanks for the tutorials BTW.
Cheers
Mike
Also,
I found that even after purging the caches, you may have to update a page/category to see your banner correctly or it may show the old padding around the header. I guarantee that the [perhaps multiple] page buffers are causing 95% of the issues that people have getting their new headers to show.
Thanks for sharing Mike.
Brad,
I have tried your technique to remove the padding and change the color and they have not worked. (I removed at this time just too keep the original code).
The color of the header and the height are terrible. Please help. 🙂
UH! After all my finagling it turned out that my site cache was preventing me from seeing the change. After I cleared the cache, the header looks WAY better!
Thanks for all your help.
Hi Brad – just found my work around to making the header image clickable.
Instead of
.site-description {
display: none;
}
I’ve used
.site-description {
opacity: 0;
}
That essentially makes it disappear yet it still there to be clicked on, making it appear that that it’s the header image that is being clicked on. I even made the font size pretty large so it covers a lot of the header area.
It’s fun when a solution is worked out (tear my hair out when it takes so long).
Thanks again for all blog and all the help you offer.
Good stuff Neal!
Glad you worked it out and yes, its a nice feeling when you work out a solution yourself.
Hi Brad – thank you for all your tutorials and help you offer.
In this one, I’ve used:
.site-header {
background-image: url(http://manaiawellbeing.co.nz/wp-content/uploads/2013/12/Manaia-Wellbeing-Yoga-and-Wellbeing.jpg);
height: 167px;
}
at this website: http://www.manaiawellbeing.co.nz
I’m trying to make the header clickable back to the home page. Could you tell me how I do that.
I have added this css:
.site-title {
display: none;
}
.site-description {
display: none;
}
to remove the title and description.
Any help much appreciated. Thank you!
Hi Brad,
I have visited all of your tutorials on this and cannot seem to remove the padding from around my logo for media queries. Please advise.
Thank you!!!