Altitude Pro – Make Front Page Site Header Background Static

By default, the front page site header background is transparent and changes to black on scroll unlike all other pages where the site header background is black by default and remains black on scroll. This tutorial provides a very simple solution which enables you to make the front page site header background the same as all other pages so it’s black and remains black on scroll.

All you need to do is remove or comment out the following 2 CSS rules located between lines 1130 – 1139 in the Altitude Pro child themes style.css file:

/* Remove or comment out these 2 rules
.featured-section .site-header {
	background-color: transparent;
}

.featured-section .site-header > .wrap {
	border-bottom: 1px solid #fff;
}
*/

And here’s the result showing the site header background remains black regardless of scroll like all other pages:

Another option

You could also remove or comment out the following js located in js/global.js between lines 3 -17.

if( $( document ).scrollTop() > 0 ){
	$( '.site-header' ).addClass( 'dark' );			
}

// Add opacity class to site header
$( document ).on('scroll', function(){

if ( $( document ).scrollTop() > 0 ){
	$( '.site-header' ).addClass( 'dark' );			

} else {
	$( '.site-header' ).removeClass( 'dark' );			
}

});

The Altitude Pro child theme by StudioPress is similar to a more recently developed child theme Infinity Pro which also runs on Genesis.