How to give globally transparency to the Default Header with the default titles?

  • Created
  • Category

Follow the steps below:

  1. Go Appearance > Customize > Default Header and set the transparency you prefer for your default header.
  2. Go Theme Options > Page Options and upload the background image you prefer for the title area. Do the same in the Theme Options > Blog Options for all the archive pages (categories, tags etc).
  3. Finally add the code below in Theme Options > CSS Options
#grve-body.single-post #grve-header,
 #grve-body.archive #grve-header {
 background-color: transparent;
 }
 #grve-body.single-post #grve-post-title,
 #grve-body.archive #grve-page-title {
 margin-top: -90px; /* Give your Header's Height */
 padding-top: 90px; /* Give your Header's Height */
 }
 #grve-header[data-topbar='yes'] #grve-inner-header {
 position: absolute;
 }

In case that you are using the Events Calendar by Modern Tribe and you also need a transparent header for the Events page, use the code below instead:

#grve-body.single-post #grve-header,
 #grve-body.archive #grve-header {
 background-color: transparent;
 }
 #grve-body.single-post #grve-post-title,
 #grve-body.archive #grve-page-title {
 margin-top: -90px; /* Give your Header's Height */
 padding-top: 90px; /* Give your Header's Height */
 }
 #grve-header[data-topbar='yes'] #grve-inner-header {
 position: absolute;
 }
.post-type-archive-tribe_events #grve-header.grve-default #grve-inner-header {
	background-color: transparent;
}

Then you will have a transparency header globally 🙂