Updated on 27 Sep 2022
Tested in Monochrome 1.6.0 and Genesis 3.4.0
Monochrome Pro comes with a fixed site header having a white background on all pages including the homepage (with front page 1 section that has the full-width background image) and single posts (that have the featured image as background below the site header).
If you are looking to set a transparent background for the site header on the above views i.e., homepage and single posts that have featured images, add the following at the end of Monochrome Pro’s style.css:
.home .site-container:not(.shadow) .site-header,
.single.featured-image.header-image .site-container:not(.shadow) .site-header {
position: fixed;
background-color: transparent;
}
.home
.content
.entry-content
.ab-block-container:first-child
.ab-container-content {
padding-top: 80px;
}
.home .site-container:not(.shadow) .nav-primary .genesis-nav-menu > li > a,
.single.featured-image
.site-container:not(.shadow)
.nav-primary
.genesis-nav-menu
> li
> a,
.home .site-container:not(.shadow) .site-title a,
.home .site-container:not(.shadow) .site-title a:hover,
.home .site-container:not(.shadow) .site-title a:focus,
.single.featured-image.header-image .site-container:not(.shadow) .site-title a,
.single.featured-image.header-image
.site-container:not(.shadow)
.site-title
a:hover,
.single.featured-image.header-image
.site-container:not(.shadow)
.site-title
a:focus {
color: #fff;
}
.home.header-image .site-container:not(.shadow) img.custom-logo,
.single.featured-image.header-image
.site-container:not(.shadow)
img.custom-logo {
filter: invert(1);
}
@media (max-width: 1023px) {
.js.home .site-container:not(.shadow) #genesis-mobile-nav-primary,
.js.single .site-container:not(.shadow) #genesis-mobile-nav-primary {
background-color: transparent;
color: #fff;
}
}After scrolling down by 50px, site header will get a white background.
Sample screenshots:
Homepage:
Single post having a featured image:
