CSS edits for one page to override global CSS

[444media]

I have been using the CSS (pasted below) globally for most of my X sites for a number of years now, but wanted to ask if it’s possible to have one page override a portion of this CSS. This CSS helps my header be transparent and I have the slider rev slide appear behind it (see uscapaa.com). But when one scrolls down the header then has a blue background.

My question is, is it possible for one page to have the header not be transparent when one lands on the page initially? I am using a slide image that has a white BG and the text of the menu is white. So can I add some sort of CSS to the page to override the transparent BG and make the header the solid blue it is when scrolling down other pages?

OR, what would the CSS be, if possible, to make the text color of the menu items a different color instead just for this page only? So then they would be visible on the white BG. But still then switch back to white text once scrolling started (like on the rest of the site)? Is that possible?

One or the other would fix the issue, but I would like to know how to do both, if possible, for future reference.

Thanks!
-Chris

.page.x-navbar-fixed-top-active .masthead {
position: absolute;
top: 0;
width: 100%;
}
.page.x-navbar-fixed-top-active .x-navbar {
background-color: transparent;
border-bottom:none;
}

.page.x-navbar-fixed-top-active .x-navbar.x-navbar-fixed-top {
background-color:#ffffff;
border-bottom: none;
}

.page.x-navbar-fixed-top-active .x-navbar-wrap {
height: 0;
}

.page .x-navbar {
background-color: transparent;
border:0;
}

.page .x-topbar-fixed-top,
.x-logobar-fixed-top {
position:fixed;
top:0;
width:100%;
}
.x-navbar {
box-shadow: none !important;
}
.x-slider-container.below {
border-bottom: none;
}

.x-navbar-fixed-top {
background-color: rgb(15,51,85) !important;
}
}
.x-colophon.top {
background-color: rgb(15,51,85);
color: #fff;
}

/* This is the bottom footer area */
.x-colophon.bottom {
background-color: black;
box-shadow: none;
}
ul.sub-menu {
background-color: rgb(15,51,85) !important;
}
.x-nav-wrap.mobile {
background-color: #000;
}

.x-navbar .mobile .x-nav li a {
padding-left: 10px;
paddig-right: 10px;
}

[ruenel]

Hello @444media,

Thanks for writing in!

Normally, a global CSS could be like this:

.my-element-class {
  /* some styling here */
}

If you want to override this for an specific page, you can have something like this:

.page-id-123 .my-element-class {
  /* other override styling here */
}

wherein the 123 is the ID of the page. To get the ID of the page, please check out this documentation:

• https://theme.co/docs/how-to-locate-post-ids

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Best Regards.

[tristup]

Hi @444media,

By withdrawing the post, I believe you already have resolved the issue. If the issue still existed, you can let us know.

Thanks.

[444media]

Hi Tristup…yes, all resolved. Thought it was not, but figured out my mistake, and cancelled my reply post. Thanks!

[ruenel]

You are most welcome.