Fixed Header

Site URL: https://duck-buffalo-k3d3.squarespace.com

Hello!

I'm attempting to keep the header Constant and Fixed as I scroll through the pages. As of now it is fixed but not constant - as in it changes colors based on each page when it scrolls down 

I would like the header to keep the metal look when scrolling rather than changing to green.

Here is the Current Code. Appreciate any help!

//Header Image
.header {
  background-image: url("https://static1.squarespace.com/static/5e8ca6472e5c376d3f69a514/t/5e9e0633a2713368e9c28d3f/1587414595997/TIB+-+Metal+Header+Texture+-+v1.png")
}

//Header formatting

@media screen and (max-width: 700px) {
 .sqs-block-horizontalrule
{max-width: 100%}
.sqs-block-content hr {
margin-top: -33px !important;
margin-bottom: -33px !important;
}
 .Main-content { margin-top: -20px !important;
margin-bottom: -82px !important;
}
.sqs-block-html {margin-top: -40px;
  padding-bottom: 0px;
}
  
 }