Transparent header on certain pages

Hi!

I am using the following code to keep the header transparent until scrolling:

/navbar trans to opaque on scroll/
.masthead {
position: absolute;
width: 100%;
}

.x-navbar {
background-color: transparent;
border-bottom: 0;
box-shadow: none;
}

.x-navbar-fixed-top {
background-color: #474747;
}

.x-navbar {
-webkit-transition: .5s;
transition: .5s;
}

However there are certain pages where we’d rather have the original header in place, without transparency on scroll. How can I isolate this effect to only certain pages?

Thanks!

Hi Julianne,

Thanks for writing in! When you’re adding custom CSS rules, you can target specific pages or posts by adding page/post class IDs into your CSS.

For example:

.page-id-135 .masthead {
  position: absolute;
  width: 100%;
}
.postid-1 .masthead {
  position: absolute;
  width: 100%;
}

You can locate page or post IDs by following our guide on knowledge base section here (https://theme.co/apex/forum/t/setup-how-to-locate-post-ids/59).

Thanks!

Great, thank you!

You are most welcome. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.