Sridhar Katakam

Genesis and WordPress Tutorials

White background site header in Showcase Pro

by 4 Comments

Updated on April 13, 2018

Showcase Pro has a transparent site header initially (i.e, when the scroll position is at the top of browser) which becomes white upon scrolling down.

If you are looking to set white background all the time, make these changes in its style.css:

Tested in Showcase Pro 2.0.2.

Change

a) L1554:

Comment out or delete

@media only screen and (min-width: 800px) {
    body.with-page-header.header-image:not(.header-scroll) .site-title a {
        background-image: url(images/logo_light.png) !important;
    }
}

b) L1579:

.site-header,
.header-image .site-header {
    padding: 3rem 0 2.5rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
}

to

.site-header,
.header-image .site-header {
    padding: 3rem 0 2.5rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /*background: transparent;*/
}

c) L1610:

.with-page-header .site-title a {
    color: #fff;
}

to

/*.with-page-header .site-title a {
    color: #fff;
}*/

d) L1652:

.with-page-header .genesis-nav-menu a,
.with-page-header .genesis-nav-menu .menu-item.highlight a {
    color: #fff;
}

to

/*.with-page-header .genesis-nav-menu a,
.with-page-header .genesis-nav-menu .menu-item.highlight a {
    color: #fff;
}*/

  • The white background is now showing all the time but the code changes did have one adverse affect. On desktop ONLY the logo (left hand side) in the header does not appear until you scroll down then it pops up.

    Scrolling back up it disappears again when you get back to the top.

    Any help is appreciated!

    Reply

  • Sridhar,

    Just noticed one last thing that stopped working on the header before you scroll

    In menus I created a “custom link” with a phone number with URL – “tel:+18006668989”, navigation label – “800-666-8989” and CSS Class “highlight”

    The highlighting around the phone number is missing and only appears after you scroll.

    Reply
    • >