Header bar shrink on scroll - glitch when going back to top

Site URL: https://bridgendathletics.org

I have entered some code to allow my header bar to shink on scroll which works fine, however when you scroll back to the top of a page you get a flash of colour of nav at original size. Ideally the top nav bar should only be visible with transparent background. 

Not sure if this makes sense haha... quite hard to explain, if you scroll down on the page, then back up to top you should see it flash.

password: bridgendathletics

This is the code:

header.shrink {
  .header-announcement-bar-wrapper{
    padding-top: 20px!important;
    padding-bottom: 20px!important;
    background: transparent !important;
  } 
 .header-title-logo a {
   max-height: 50px;
    content: url('https://static1.squarespace.com/static/6005a5e6e8c063189b6baf41/t/6005c7234f994d4e738961df/1610991400154/BAC_Logotype_White_type.png');
 

Hi. Have you solved this yet?

Hey, have you solved this? I'm having the same issue. 

On 4/19/2022 at 6:20 AM, montanaedamone said:

Hey, have you solved this? I'm having the same issue. 

If you share link to your site, we can take a look