Remove Padding From Lifestyle Pro Site Header

Nov 12, 2013

—

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.

Comments

9 responses to “Remove Padding From Lifestyle Pro Site Header”

Mike

June 28, 2014

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

Log in to Reply
1. mike
  
  June 28, 2014
  
  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.
  
  Log in to Reply
  1. Brad Dalton
    
    June 29, 2014
    
    Thanks for sharing Mike.
    
    Log in to Reply
Brittney Wilson

December 27, 2013

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. 🙂

Log in to Reply
1. Brittney Wilson
  
  December 27, 2013
  
  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.
  
  Log in to Reply
Neal Ghoshal

December 9, 2013

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.

Log in to Reply
1. Brad Dalton
  
  December 9, 2013
  
  Good stuff Neal!
  
  Glad you worked it out and yes, its a nice feeling when you work out a solution yourself.
  
  Log in to Reply
Neal Ghoshal

December 9, 2013

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!

Log in to Reply
Victoria B

December 2, 2013

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!!!

Log in to Reply