Template Hart | help with transparent header while scrolling.

Site URL: https://www.studio-woodstock.com

Hello,   I am using the Hart template on squarespace 7.1 version.  My ideal header is one that stays fixed and transparent as the user scrolls.  As of right now, the header on the page is transparent and fixed at the very start of the page.  As soon as one starts scrolling the header goes black. 

I have done some research in the forums and I found a topic similar to my question.  The problem is the css that was provided in the forum does not work.

CSS I pasted from the above mentioned forum post:  

.header#header {position: fixed!important;}

.header-nav-folder-content {
   background: transparent!important;
}

and

.tweak-fixed-header .header .header-announcement-bar-wrapper {
    background: transparent !important;
}

I tried pasting these separately and together within the separate css editor via the design link and within the pages link of each individual page.  

any help with this would be much appreciated.  the webpage is:

www.studio-woodstock.com 

password: skyler

Thank you for your time,

Skyler Smith