Transparent site header on Infinity Pro’s homepage when there’s a header image

Posted on
5/5 - (458 votes)

In my tutorial requests Trello board, a user asked:

Infinity Pro Once you add a logo the header background on the Home screen becomes white. Would LOVE help going back to see thru ‘with’ logo.

When a site header image has been set in Infinity Pro, the site header on the front page will no longer be transparent in its initial state.

Want to change this so the header remains transparent with a site header in place?

Simply edit css/style-front.css and make these changes:

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

to

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

and

.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;
}

to

.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 .white .genesis-nav-menu a,
.header-image.front-page .white .genesis-nav-menu .sub-menu a,
.header-image.front-page .white .offscreen-content-icon button {
    color: #000;
}

When scrolling down, the header will get a white background.