Metro Pro: How to make a 560 x 150 logo (uploaded as Header) responsive with a search widget in 'Header Right' widget area. http://sridharkatakam.com/adding-responsive-logo-metro-pro/

functions.php

<?php
//* Do NOT include the opening php tag

//* Add support for custom header
add_theme_support( 'custom-header', array(
  // 'width'           => 270,
	// 'height'          => 80,
	'width'           => 560,
	'height'          => 150,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

style.css

.title-area {
    width: 560px;
}

.header-image .site-title a {
    max-width: none;
    min-height: 150px;
}

.site-header .widget-area {
	width: 464px;
}

@media only screen and (max-width: 1139px) {
	.site-header .widget-area {
		width: 328px;
	}
	.site-header .search-form {
		width: 70%;
	}
}

@media only screen and (max-width: 1023px) {
	.title-area {
    	float: none;
    	margin: 0 auto;
	}
	.site-header .widget-area {
		width: 464px;
		float: none;
		margin: 0 auto;
	}
	.site-header .search-form {
		width: 100%;
	}
}

@media only screen and (max-width: 767px) {
	.title-area {
    	float: none;
    	margin: 0 auto;
    	width: 100%;
	}
	.header-image .site-title a {
		background-size: contain !important;
	}
}

@media only screen and (max-width: 650px) {
	.site-title {
    	margin-bottom: 0;
    }
}

@media only screen and (max-width: 551px) {
	.site-header .widget-area {
		float: left;
		width: 100%;
	}
}

@media only screen and (max-width: 500px) {
    .header-image .site-title a {
        min-height: 112px;
    }
    .header-image .site-title, .header-image .title-area {
    	min-height: 0;
    }
}

@media only screen and (max-width: 346px) {
    .header-image .site-title a {
        min-height: 108px;
    }
}

@media only screen and (max-width: 320px) {
    .header-image .site-title a {
        min-height: 72px;
    }
    .header-image .site-title, .header-image .title-area {
    	min-height: 0;
    }
}