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:

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

<pre><code>if ( $(document).scrollTop() &gt; 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.

2 responses to “Infinity Pro – Make Front Page Site Header Background Static”

Anup Engineer

December 16, 2023

Hey Brad, I tried out your solution on one of my sites and it didn’t work. You can check the site on https://www.charlottesingles.com/.

I would greatly appreciate any feedback or pointers to fix this. Thanks!

1. Brad Dalton
  
  December 16, 2023
  
  Anup. Works perfectly as seen in the screenshot however support is only provided for active members.https://wpsites.net/no-access/