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:
<br />
/* Add white class to site container after 50px.
$(document).on( 'scroll', function() {
<pre><code>if ( $(document).scrollTop() > 50 ) {
$( '.site-container' ).addClass( 'white' );
} else {
$( '.site-container' ).removeClass( 'white' );
}
});
</code></pre>
*/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.
Leave a Reply
You must be logged in to post a comment.