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

WP SITES

2662

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Full Width Responsive Header Image In Genesis

Most themes include the following code in the child themes functions file you can modify to add a full width responsive header image to your Genesis child theme.

add_theme_support( 'custom-header', array(
	'width'           => 1080,
	'height'          => 120,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

And then you can modify the values for the width under the Site Header section of your child themes style.css file to match your full width image dimensions.

.header-image .site-title a {
	background-color: transparent;
	max-width: 1080px;
	min-height: 120px;
	padding: 0;
}

This is what you get on a desktop computer with a large screen:

full-width

While that method enables you to add a full width header image in any Genesis child theme, it doesn’t make the header image responsive on smaller screens.

Not Responsive

This is what you get on smaller screen widths:

not-responsive

It cuts off the header image when you reduce the screen width.

Responsive

Members can login to get the code which enables you to get this on any size screen:

responsive

Demo Video

Here’s the solution for members:

Register for full access

Related Tutorials

  • 2 New Ways to Add a Full Width Header Image

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems