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

WP SITES

2468

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Subscribe
  • Register
  • Videos
  • Log in

Need Help? - Get Coding Support Now

Add Full Width Header Image To The Magazine Pro Theme

You can change the PHP code for the Custom Header function located under your Appearance Menu, in your child themes functions.php file around line 42 however you will then need to change the CSS values for your header to match these in your child themes style.css file as well.

Custom Header Image

The values in this code have been changed from 90px height and 380px width to 1140px width by 200px height.

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'default-text-color'     => '000000',
	'header-selector'        => '.site-title a',
	'header-text'            => false,
	'height'                 => 200,
	'width'                  => 1140,
) );

Style Sheet

Change the value for the height of your header image ion Line 1173. This example has been changed from the default 90px to 200px.

.header-image .site-title a {
	background-position: center !important;
	background-size: contain !important;
	float: left;
	display: block;
	min-height: 200px;
  	text-indent: -9999px;
	width: 100%;
}

full width header image

You can then remove the top padding above the header image by modifying the values on Line 1106 of your child themes style.css file:

.site-header {
	padding-top: 30px;
	padding-top: 3rem;
}

To remove the padding below your image, change the values on Line 1193

.header-image .site-header .title-area,
.header-image .site-header .widget-area {
	padding: 30px 0;
	padding: 3rem 0;
}

Magazine Pro Header Image

On Line 1111 you’ll find the code for the site header wraps bottom border which you can also remove:

.site-header .wrap {
	border-bottom: 2px solid #222;
	padding: 30px 0;
	padding: 3rem 0;
}

Mobile Responsiveness

See the reply to Bob’s question which includes CSS for Media Queries in the comments below.

Related Tutorials

  • Magazine Pro Full Screen Width Responsive Header Image
Subscribe for new Genesis Tutorials

Magazine Pro

Primary Sidebar

Recently Coded

  • Infinity Pro – Change Team Page From 4 To 3 Columns
  • Infinity Pro Vertical Menu
  • Genesis Sample Theme – Custom Archive Page Template With Different Hero Images
  • Foodie Pro – Reposition Search Box Before Nav Menu
  • Showcase Pro – Use Custom Image As Single Post Entry Header Background

Brad Dalton Specializes In Genesis child theme customization & code modification.

Advertise · WPEngine · Genesis · Log in

  • Membership
  • by Theme
  • Contact
  • RSS
  • Newsletter ( Twice Weekly )