Cacher is the code snippet organizer for pro developers

/* Shrinking Header
--------------------------------------------- */

.site-header {
	position: fixed;
	width: 100%;
	z-index: 999;
}

.title-area {
	padding-top: 16px;
	padding-bottom: 0;
}

.site-header .wrap,
.bumper {
	min-height: 164px;
}

.site-header,
.site-header .wrap,
.site-description {
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition:    all 0.4s ease-in-out;
	transition:         all 0.4s ease-in-out;
}

/* Shrink
--------------------------------------------- */

.site-header.shrink {
	border-bottom: 1px solid #ddd;
}

.shrink .wrap {
	background-color: rgba(255, 255, 255, 0.1);
	min-height: 80px;
	padding: 0;
}

.shrink .site-title {
	font-size: 20px;
	padding-top: 3px;
}

.header-image .shrink .site-title {
	padding: 0;
}

.header-image .shrink .site-title > a {
	min-height: 60px;
}

.shrink .site-title a {
	background-size: 270px 60px !important;
}

.site-header.shrink .widget-area {
	padding-top: 0;
}

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

	.title-area {
		width: 320px;
	}
}

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

	.title-area {
		width: 100%;
	}

	.site-header .wrap, .bumper {
		min-height: 172px;
	}

	.site-header.shrink .wrap {
		min-height: 60px;
	}

}

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

	.shrink .site-title {
		font-size: 24px;
	}

}

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

	.site-header {
		top: 0;
	}

	.site-header .wrap, .bumper {
		min-height: 130px;
	}

}

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

	.site-header .wrap, .bumper {
		min-height: 190px;
	}

}

jQuery(function( $ ){

	$(".site-header").after('<div class="bumper"></div>');

	$(window).scroll(function () {
		if ($(document).scrollTop() > 50 ) {
			$('.site-header').addClass('shrink');
		} else {
			$('.site-header').removeClass('shrink');
		}
	});

});

//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'custom_load_scripts' );
function custom_load_scripts() {

	wp_enqueue_script( 'shrinking-header', get_bloginfo( 'stylesheet_directory' ) . '/js/shrinking-header.js', array( 'jquery' ), '1.0.0', true );

}