• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Remove Padding From Lifestyle Pro Site Header

There’s at least 2 ways you can remove the padding from around your header image.

  1. You can modify the default CSS code in your style sheet by removing the value for padding.
  2. 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.

default padding

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.

remove padding

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.

header image

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.

More Lifestyle Pro Theme Solutions

  • Customize Mobile Responsiveness of Lifestyle Pro Theme Header
  • Customize Lifestyle Pro Theme Header Image Area
  • Lifestyle Pro Full Size Header Image Spanning Entire Width of Screen

Reader Interactions

Comments

  1. Mike says

    June 28, 2014 at 2:29 pm

    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
    • mike says

      June 28, 2014 at 11:43 pm

      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
      • Brad Dalton says

        June 29, 2014 at 4:02 am

        Thanks for sharing Mike.

        Log in to Reply
  2. Brittney Wilson says

    December 27, 2013 at 12:18 am

    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
    • Brittney Wilson says

      December 27, 2013 at 12:54 am

      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
  3. Neal Ghoshal says

    December 9, 2013 at 8:47 am

    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
    • Brad Dalton says

      December 9, 2013 at 7:26 pm

      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
  4. Neal Ghoshal says

    December 9, 2013 at 8:27 am

    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
  5. Victoria B says

    December 2, 2013 at 9:43 pm

    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

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.