Adding a transparent color change upon scroll with fixed navigation

I'm trying to add a transparent color to the fixed top navigation upon scroll using the following code to no avail:

.Header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10;
    z-index: 999;  
}
/* Mobile */
.Mobile-bar {
    background-color:transparent;
}
/* Desktop */
.Header {
    background-color:transparent !important;
}
.Header{
   transition: 0.2s;
  color: #f6f6f6;
}

What am I doing wrong?

Thank you!

1 hour ago, BoundtreeM said:

I'm trying to add a transparent color to the fixed top navigation upon scroll using the following code to no avail:

.Header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10;
    z-index: 999;  
}
/* Mobile */
.Mobile-bar {
    background-color:transparent;
}
/* Desktop */
.Header {
    background-color:transparent !important;
}
.Header{
   transition: 0.2s;
  color: #f6f6f6;
}

What am I doing wrong?

Thank you!

 

Have you tried using the dynamic style and set position fixed basic?

I'm not seeing that option in the menu. I'm using the Heights template. this is what I see :

11 hours ago, BoundtreeM said:

I'm not seeing that option in the menu. I'm using the Heights template. this is what I see :

Can you share your site with the protected password so I can take a look?

Thank you--the site is live at boundtreemarketers.com...

I check that you have already set the transparent background for header

Have you figured it out?

I want the header to transition to a darker transparent color upon scrolling so that it doesn't get lost...