WooCommerce NavBar - Opacity on Single Product Page Only

[t_docuservpro]

Hi There,

I have my nav bar all set up to be transparent at the top, shrink and opaque on scroll and then return to transparent and large at the top.

However, my header is messed up on my single product pages for WooCommerce only.

I tried putting in the code below, but the navbar returns to transparent if you scroll down and back up. How can I keep it transparent on this page at all times and maintain the shrinking feature? I tried combining other CSS and java codes I found on the support forum, but none have worked. Here’s what’s in there now:

.single-product .x-navbar-inner {
background-color: #141921;
}

See 805stats.com/team-access-pass

Than

[Alaa]

Hi,
I’ve checked your website and I think you want to have the header in a dark color on single products pages only? if so, then that’s the code you will need:

.single-product .x-container.offset {
    margin: 5em auto;
}
.single-product .x-navbar {
    background-color: #141921!important;
}

Thanks.