Infinity Pro – Make Front Page Site Header Background Static

By default, the site header Infinity Pro uses a transparent background which displays over the front page 2 widget background image and then changes to black on scroll. If you want the background color to be white without the need to scroll, here’s the solution:

There’s 2 simple steps:

Step 1 : Comment out or remove the following jQuery between lines 38 – 49 in the Infinity Pro themes js/global.js file:

/* Add white class to site container after 50px.
$(document).on( 'scroll', function() {

    if ( $(document).scrollTop() > 50 ) {
	$( '.site-container' ).addClass( 'white' );

    } else {
	$( '.site-container' ).removeClass( 'white' );
	}

    });
*/

Step 2 : Remove or comment out the following CSS rules between lines 13 – 67 in the Infinity Pro themes css/style-front.css file:

/*
.front-page .site-header {
	background-color: transparent;
	border-bottom: 1px solid transparent;
}

.front-page .site-header,
.header-image.front-page .site-header {
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

.front-page .offscreen-content-icon button,
.front-page .site-title a,
.front-page .site-title a:hover,
.front-page .site-title a:focus {
	color: #fff;
}


@media only screen and (min-width:800px) {
	.front-page .nav-primary .genesis-nav-menu a {
		color: #fff;
	}
}

.front-page .offscreen-content button,
.front-page .offscreen-content-icon button {
	background-color: transparent;
}

.front-page .white .offscreen-content button,
.front-page .white .offscreen-content-icon button {
	background-color: #fff;
}

.front-page .genesis-nav-menu .sub-menu a,
.front-page .white .genesis-nav-menu a,
.front-page .white .offscreen-content-icon button,
.front-page .white .site-title a,
.header-image.front-page .genesis-nav-menu a,
.header-image.front-page .genesis-nav-menu .sub-menu a,
.header-image.front-page .offscreen-content-icon button {
	color: #000;
}

.front-page .genesis-nav-menu a:hover,
.front-page .genesis-nav-menu a:focus,
.front-page .offscreen-content-icon button:hover,
.front-page .offscreen-content-icon button:focus,
.front-page .white .genesis-nav-menu a:hover,
.front-page .white .genesis-nav-menu a:focus {
	color: #d43c67;
}
*/

Now the site header containing your site title/logo and menu should look like this:

Which is exactly the same as how it appears on all other pages by default.

Infinity Pro is a new child theme developed by StudioPress. It’s similar to another popular child theme also running on Genesis, Altitude Pro.

Reader Interactions

Leave a Reply Cancel reply