Header code injection - not showing when moving between pages but does on browser refresh

Site URL: https://www.thetravellerscollective.com/

Hi All,

I have a small site built on Mojave. 

I added some header code injection to force the homepage logo to show as an alternative, all white, logo version and at a larger size than the main site logo. The full colour site logo is then to show on all other pages on a white header. 

The issue i'm having is that this works correctly on the editor but on the live site if I move from Home > About, the white logo shows on the about page until I refresh the browser and vice versa, About > Home, the full colour site logo shows on the homepage until i refresh. 

Code in homepage code injection is below. Any help greatly appreciated. Thanks!

<style>
.Header-branding {    
display: block;    
max-width: 100%;    
max-height: 230px;
content: url("https://static1.squarespace.com/static/60300f1f15f56c38924a9609/t/6035439b1e31cf7ace586335/1614103451610/TheTravellersCollective-logo-white.png") !important;
  }
</style>

<style>
.Mobile-bar-branding-logo {
display: block;
max-width: 100%;
max-height: 124px;
content: url("https://static1.squarespace.com/static/60300f1f15f56c38924a9609/t/60354bb3553c1e7fc257fe9d/1614105524002/TTC-LOGO-LINEAR-TEAL.png") !important;
}
</style>

I realised I'd forgotten to uncheck Ajax loading. Question closed.