Forced Mobile on Brine template with transparent fixe header, trying to make the header opaque on scroll.

Site URL: https://claireguillonfilms.squarespace.com/

Hello there, 

I've managed to make a site with a transparent forced mobile menu. I would like to make the fixed header opaque on scroll though. Is there any way to do this with some custom css?

It looks great as it really works on the index overlay, until you scroll and then it looks a bit weird. The code that I used to achieve this is:

.Index-page:first-child, .Main--page, .Main--blog-item, .Main--products-item, .Intro {
margin-top: -85px !important
}

I'd appreciate any help - thanks!

Alisha