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

WP SITES

2762

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Premium Access
  • Log in

Modern Portfolio Pro Responsive Custom Header Image

If you want to add a custom header image wider than the default size in the Modern Portfolio Pro child theme by StudioPress, you’ll need to modify the PHP code and CSS.

In this example, we’ll add a image which is 600 px width by 140 px height.

Demo Video

Here’s the step by step instructions:

Step 1 – functions.php

Lines 54 and 55, change the width and height to match your image.

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

Step 2 – style.css

Line 895, change the width to match your image:

.title-area {
    float: left;
    padding: 12px 0;
    width: 600px;
}

Line 964, change the height to match your image:

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

Line 1963, add the following CSS for Media Queries

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

    .header-image .site-header .site-title a {
		background-size: contain !important;
	}
	
}

Note: As a guide, if your image where 700 px width, you would need to change the max-width: 640px to 740px in the above CSS for Media Queries

Modern Portfolio Pro Theme

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 WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting