Sridhar Katakam

Genesis and WordPress Tutorials

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

by 16 Comments

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.

    • Yes.

      Add this in style.css:

      @media only screen and (min-width: 801px) {
    .site-header > .wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .nav-primary {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

    .title-area {
        -ms-flex-item-align: start;
            align-self: flex-start;
    }
}
      Reply

      • Hi Sridhar, I appreciate all that you do for us! This seems to center the nav between the right edge of the header image and the right edge of the page. But how would I be able to center the nav perfectly in the center of the page (disregarding the header image)?

        Any help would be incredibly appreciated!

        Reply

  • This was very easy to implement.

    I have a question regarding pages, however.
    On the homepage the site header is transparent and gets a white background as you scroll down.

    I was wondering how to implement this site header feature on all pages (not just the home page site header). This way the site header will show the background image I’ve selected for each page.

    Reply

    • In style.css try changing

      .site-header {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 30px;
    padding-right: 30px;
    position: fixed;
    width: 100%;
    z-index: 9990;
}

      to

      .site-header {
    background-color: transparent;
    border-bottom: 1px solid #eee;
    padding-left: 30px;
    padding-right: 30px;
    position: fixed;
    width: 100%;
    z-index: 9990;
}

.white .site-header {
    background-color: #fff;
}
      Reply

  • Do you know a way to have the header image change on scroll from a light color (over a dark background image) to a dark color against the white background of the sticky nav bar?

    Thanks!

    Reply

      • Yes.

        Set the light version of the image at Appearance > Header in the Customizer.

        Upload the dark version to theme’s images directory.

        Then add this in style.css:

        .header-image .site-container.white .site-title a {
    background-image: url(images/dark-text-logo.png) !important;
}

        where dark-text-logo.png is the name of the dark image.

        Reply

  • It does not work for me. The logo is still seen with the white background.

    from

    .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 from

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

    in style-front.css

    What I´m doing wrong?

    Reply

    • I’m having the same issue. I’m guessing something has been changed from the original post. Both of those CSS blocks are identical – thereby changing nothing. Did you ever find a solution?

      Thanks

      Jim

      Reply
    • >