Showcase Pro Site Header and page header in Genesis

This tutorial provides the steps to add a showcase pro site header and page header in the Genesis Sample theme. The site header will be transparent by default and add background whiling scrolling with effect and revert the effect when the scrolling goes back to the top.

FREE TYPE 1

STEP 1

Download Showcase pro theme from StudioPress or designbybloom and extract it on your computer.

STEP 2

a) Select page_blog.php, home.php and single.php file. Copy it and Paste it into your child theme folder.

b) Copy global.js file from/js/ folder and paste it into your child-theme/js/ folder.

STEP 3

Add the following in functions.php

add_action( 'genesis_setup', 'showcase_theme_setup', 15 );
function showcase_theme_setup() {
// Add Page Header
add_action( 'genesis_after_header', 'showcase_page_header', 8 );

// Add with-page-header body class
add_filter( 'body_class', 'showcase_page_header_body_class' );

}

wp_enqueue_script( 'showcase-global', get_stylesheet_directory_uri() . '/js/global.js', array( 'jquery' ), '1.0.0', time() );

/**
 * Page Header Class
 *
 */
function showcase_page_header_body_class( $classes ) {

	if( is_page() && has_post_thumbnail() )
    	$classes[] = 'with-page-header';

    return $classes;

}

/**
 * Page Header
 *
 */
function showcase_page_header() {
	$output = false;
	if( is_page() ) {

		$image = get_post_thumbnail_id();

		if( $image ) {

			// Remove the title since we'll add it later
			remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

			$image = wp_get_attachment_image_src( $image, 'showcase_hero' );
			$background_image_class = 'with-background-image';
			$title = the_title( '<h1>', '</h1>', false );

			$output .= '<div class="page-header bg-primary with-background-image" style="background-image: url(' . $image[0] . ');"><div class="wrap">';
			$output .= '<div class="header-content">' . $title . '</div>';
			$output .= '</div></div>';
		}
	}

	if( $output )
		echo $output;
}

STEP 4

Add the following in style.css

/* Site Header
 * ========================================================================== */

.site-title a {
	color: #1a1a1a;
	text-decoration: none;
}

.header-image .site-title {
	display: block;
	text-indent: -9999px;
}

.header-image .site-title>a {
	background-position: center center !important;
	background-size: contain !important;
	float: left;
	height: 5rem;
	width: 14rem;
	background-image: url(images/logo_dark.png);
}

@media only screen and (min-width: 960px) {
	body.with-page-header.header-image:not(.header-scroll) .site-title a {
		background-image: url(images/logo_light.png) !important;
	}
	.site-header {
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		-ms-transition: all .2s ease-in-out;
		-o-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
	}
}

@media only screen and (min-width: 960px) {
	.Zsite-header,
	.Zheader-image .site-header {
		width: 100%;
		z-index: 999;
		padding: 2rem 0;
		position: relative;
		background: #fff;
	}
	.site-header,
	.header-image .site-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: transparent;
	}
	.admin-bar .site-header {
		top: 32px;
	}
	.header-scroll .site-header {
		background: #fff;
		box-shadow: 0 0 2rem rgba(0, 0, 0, 0.05);
	}
	.site-header .wrap {
		max-width: none;
	}
	.with-page-header .site-title a {
		color: #fff;
	}
	.header-scroll .site-title a {
		color: #1a1a1a;
	}
	.with-page-header .nav-primary .genesis-nav-menu a {
		color: #fff;
	}
	.header-scroll .nav-primary .genesis-nav-menu a {
		color: #000;
	}
	.with-page-header .nav-primary .genesis-nav-menu .sub-menu a {
		color: #000;
	}
	.header-scroll .nav-primary .genesis-nav-menu .sub-menu a {
		color: #000;
	}
	.with-page-header .genesis-nav-menu .current-menu-item>a {
		color: #0073e5;
	}
	.header-scroll .genesis-nav-menu .current-menu-item>a {
		color: #0073e5;
	}
	.header-scroll .site-header .genesis-nav-menu .menu-item.highlight a {
		border: 2px solid #1a1a1a;
		color: #1a1a1a;
	}
}

/* Background Images and Colors
 * ========================================================================== */

.with-background-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.with-background-image:after {
	-ms-filter: "alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.30;
}

.bg-primary,
.bg-primary a {
	color: #fff;
}

[class*="bg-"],
[class*="bg-"] .wrap {
	position: relative;
	z-index: 2;
}

.bg-primary:after,
.bg-light-gray:after {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
}

.bg-primary:after {
	background: #1a1a1a;
}

.bg-light-gray:after {
	background: #dcdcdc;
}

/* Page Header
 * ========================================================================== */

.page-header {
	padding: 8rem 0;
	position: relative;
	text-align: center;
	color: #fff;
	background-color: #1a1a1a;
}

.page-header h1,
.page-header .author-box-title {
	line-height: 1.2;
	font-size: 40px;
	display: inline-block;
}

.page-header h1:last-child {
	margin-bottom: 0;
}

.page-header p {
	font-size: 2.4rem;
	max-width: 74rem;
	margin-left: auto;
	margin-right: auto;
}

.page-header p:last-child {
	margin-bottom: 0;
}

.page-header a:not(.button) {
	opacity: .5;
}

.page-header a:hover:not(.button) {
	opacity: 1;
}

@media only screen and (min-width: 960px) {
	.page-header {
		padding: calc(7% + 10.8rem) 0 7%;
	}
	.home .page-header {
		padding: calc(10% + 10.8rem) 0 10%;
	}
	.page-header h1,
	.page-header .author-box-title {
		font-size: 6rem;
	}
	.page-header .entry-meta {
		font-size: 1.6ren;
	}
}

PREMIUM TYPE 1