Sridhar Katakam

Genesis and WordPress Tutorials

Transparent Site Header in Monochrome Pro

by 7 Comments

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:

  • Hi, nice trick. Only a quVery good note, thanks! Only one question, in the version for phones or tablets, is there a way to declare the box transparent under the Menu Text and its icon?
    Currently a white beveled square appears.
    Thank you very much for your posts.estion, how to set the box behind the menu and

    Reply

  • Hi, nice trick. Only a very good note, thanks! Only one question, in the version for phones or tablets, is there a way to declare the box transparent under the Menu Text and its icon?
    Currently a white beveled square appears.
    Thank you very much for your posts.

    Reply

  • Hey Sridhar, I’m trying to achieve this but nothing is really happening on my page.
    Could it be that my Monochrome Pro is v1.1? I think I did it right, I replaced all the site header codes with yours. Could you shred some light on this?

    https://exploreaswego.com/

    Reply
    • >