Different Logo mobile for one page

Site URL: http://degriolaw.squarespace.com/lawful-permanent-resident-status

I am wondering how to change the logo on one page for mobile. I know how to do it for desktop but I am having trouble for mobile.

degriolaw.squarespace.com/lawful-permanent-resident-status

password is 2022

Add to Page Header

<style>
  .header-mobile-logo img {
    content: url(https://cdn.pixabay.com/photo/2019/12/20/02/25/por-do-sol-4707500__480.jpg);;
}
</style>

Thank you, works perfect!

any chance you have any input on how to adjust the color of the hamburger nav color before it opens and the navigation items on this one page?

<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/62b0a5a84a538a17d67418ad/t/62c60382e29bb52c941acbdf/1657144194409/Asset+1b.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
  
  
  .header-mobile-logo img {
    content: url(https://static1.squarespace.com/static/62b0a5a84a538a17d67418ad/t/62c888a1556b662c1bbd0cc5/1657309345933/Gradient_Logo%404x.png);;
}

.header-nav-item a[href="/about"], .header-menu-nav-item a[href="/about"], .header-nav-item a[href="/areas-of-practice-1"], .header-menu-nav-item a[href="/areas-of-practice-1"], .header-nav-item a[href="/contact-us"], .header-menu-nav-item a[href="/contact-us"]{
    color: #346D77 !important; 
}
.header-actions .btn {
color: #fff !important;
background-color: #346D77 !important;
}
  
  
</style>

Here is my code on that page. I know why its happening because I target the desktop navigation here to make it the green color (#346D77) but I need a way to target the mobile nav to make it white

2 hours ago, BTD said:

<style>
  .header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/62b0a5a84a538a17d67418ad/t/62c60382e29bb52c941acbdf/1657144194409/Asset+1b.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
  
  
  .header-mobile-logo img {
    content: url(https://static1.squarespace.com/static/62b0a5a84a538a17d67418ad/t/62c888a1556b662c1bbd0cc5/1657309345933/Gradient_Logo%404x.png);;
}

.header-nav-item a[href="/about"], .header-menu-nav-item a[href="/about"], .header-nav-item a[href="/areas-of-practice-1"], .header-menu-nav-item a[href="/areas-of-practice-1"], .header-nav-item a[href="/contact-us"], .header-menu-nav-item a[href="/contact-us"]{
    color: #346D77 !important; 
}
.header-actions .btn {
color: #fff !important;
background-color: #346D77 !important;
}
  
  
</style>

Here is my code on that page. I know why its happening because I target the desktop navigation here to make it the green color (#346D77) but I need a way to target the mobile nav to make it white

Use this

<style>
nav.header-menu-nav-list * {
    color: white;
}
</style>