• 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

News Pro Theme Full Width Header Image

There’s 2 steps you need to take to make your image span the full width of the site header and site container.

  1. Modify the height & width values for the Custom Header function in your child themes functions.php file
  2. Modify the CSS for the Site Header elements to match your header images dimensions and remove padding.

The PHP Modifications

The CSS Modifications

Modify the CSS declarations under the Site Header section of your child themes style.css file for these 4 classes.

You’ll find these 4 classes between lines 997 and 1062.

.site-header {
	background-color: #fff;
}

.site-header .wrap {
}

.title-area {
	width: 100%;
}

.header-image .site-title a {
	min-height: 250px;
	width: 100%;
}

Here’s the result:

full with header

You can also remove the padding from smaller screen sizes:

@media only screen and (max-width: 1023px) {

/*
.site-header .title-area {
		padding-bottom: 16px;
}
	
	
.site-header .wrap {
		padding: 20px 0;
}
*/

Image Cutoff on Smaller Screens

Try adding this in your Media Queries.

@media only screen and (max-width: 1188px) {
	
    .header-image .site-title > a {
        background-position: center !important;
        background-size: contain !important;
    }

}@media only screen and (max-width: 1023px) {
	
    .header-image .site-title > a {
        background-position: center !important;
        background-size: contain !important;
    }

}
@media only screen and (max-width: 600px) {
	
    .header-image .site-title > a {
        background-position: center !important;
        background-size: contain !important;
    }

}

If you add the above code, you might find you’ll also need to remove padding.

Here’s the video showing the result:

The above solution is tested on the News Pro child theme by StudioPress.

Reader Interactions

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.