navigation Add solid background on sticky nav in Brine

Site URL: https://magnolia-mandolin-k3fs.squarespace.com/

Hi, I'm trying to add a solid background to my nav bar as the user scrolls (but stays transparent at the top of the page), I copied some code that worked on another site I worked on a long time ago, but it's not working this time, although it displays solid white on some pages without a banner ). If anyone can help that would be great! I'm also not sure how to display alternate logos on mobile, they work on desktop (Contact Page etc.), but on mobile it defaults to the primary logo on every page. Thanks!

p/w: TJC2022

#1. Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $(function(){
 var visibleTop = 50;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( scroll >= visibleTop ) {
           $('header.Header').addClass('tp-sticky');
        }
        else {
            $('header.Header').removeClass('tp-sticky');
        }
  });
function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    }
});
</script>
<style>
  header.Header.Header--bottom.Header--overlay.tp-sticky {
    background-color: red;
    padding-bottom: 20px;
}
</style>

#2. Which code did you use?

Perfect, thanks so much! I was just using this in the CSS: 

/* fixed header */
.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.Header.Header--bottom {
  position: fixed;
  top: 0px;
  z-index:9999;
  background-color: #000000, 0.0 ;
}

.Header-inner {
  padding-top: 30px;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.Header.scrollNav {
  padding-bottom: 10px;
  background: #000000!important 1.0 ;

  .Header-inner {
    padding-top: 10px!important;
    background: #000000!important 1.0 ;
  }
   

  }

On 4/11/2022 at 8:19 AM, hostyle01 said:

Perfect, thanks so much! I was just using this in the CSS: 

/* fixed header */
.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.Header.Header--bottom {
  position: fixed;
  top: 0px;
  z-index:9999;
  background-color: #000000, 0.0 ;
}

.Header-inner {
  padding-top: 30px;
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
}

.Header.scrollNav {
  padding-bottom: 10px;
  background: #000000!important 1.0 ;

  .Header-inner {
    padding-top: 10px!important;
    background: #000000!important 1.0 ;
  }
   

  }

Did you solve or still need help?