Customize mobile nav bar

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

Hey! 

I'm having some issues replicating the code that I have used for the desktop view of my website for mobile. On desktop I have a code in place that on scroll, the logo in the nav bar changes so it can be seen on the white background. I thought it would do the same on mobile, but it doesn't, so I was wondering if anyone could help (please see video). 

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

Thanks so much in advance!

Use this code for mobile

header#header.shrink div.burger-inner>div {
    background-color: #778c72 !important;
}
header#header.shrink .header-mobile-logo img {
    content: url(https://static1.squarespace.com/static/6227bdf43dc4df7f89c9c02c/t/66ce52685955a32fa99eefb5/1724797544560/Artboard+1+copy+5.png) !important;
}