Hi @AThompson_social - I've used this in the past and it worked well for me on Brine template:
1. Add this to Settings > Advanced > header code injection:
(Change the scroll height you wish to change the color, here it is set to 400 px)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(window).on("scroll", function() {
if($(window).scrollTop() > 400) {
$(".Header").addClass("on-scroll");
} else {
$(".Header").removeClass("on-scroll");
}
});
</script>
2. Add this to Design > Custom CSS
Change the background color you wish to use. If your navbar is transparent at the starting point, then remove the last piece of code (.Site-inner)
.Header{
background-color: blue!important;
position: fixed!important;
transition: 0.2s all linear;
-webkit-transition:background-color .4s;
-moz-transition:background-color .4s;
transition:background-color .4s;
}
.on-scroll{
background-color: red!important;
}
.Site-inner{padding-top: 50px;}
Let me know how it goes! Your website is pwd protected... if you want further help, please share the password 😉