Custom CSS for Mobile navigation on one page only

Site URL: https://eagle-dog-rrlp.squarespace.com/config/pages

Hi! I'm trying to add code to my page header code injection to do the following things on ONE PAGE ONLY:

1. Change logo (PC) / this worked

2. Change menu items color (PC) / this worked, but it also changes the mobile menu items' color

3. Change burger menu color (three stripes) to white instead of black / this worked, but when I want to change the 'X' to black (because the overlay is white) it also changes the three stripes back to black

4. Change logo (Mobile) / this one is not working at all

5. Change menu items color (Mobile) / these were fine, but then I needed the PC ones to be white and it also changed the mobile ones.

Goal:

- Mobile menu: white

- Mobile overlay menu: black

- PC menu: white

ONLY for THIS page.

This is the code I've used:

<style>
  header#header * {
    color: #F8F6F4 !important;
}
</style>

<style>
            div.header-mobile-logo a {
                content: url("https://static1.squarespace.com/static/61bf7d4d4f1c80727df210f9/t/61c0c6cc6152ec567fb643f2/1640023756712/6.png") !important;
                max-width: 290px;
                /* if logo needs to be centered */
                margin-left: auto;
                margin-right: auto;
            }
        </style>

<style>
    .burger-inner:before>div {
              background: #AAAAAA !important;
  }
      .burger-inner:after>div {
            background: #F8F6F4 !important;
}
</style>

I tried a ton more from the forum but I can't seem to figure this one out! Please help!

Changed my site to password:

page: https://eagle-dog-rrlp.squarespace.com/home

password: temPass2021

2. Change menu items color (PC) / this worked, but it also changes the mobile menu items' color

Replace this code

header#header * {
    color: #F8F6F4 !important;
}

with this code

.header-nav-item a {
    color: #F8F6F4 !important;
}

3. Change burger menu color (three stripes) to white instead of black / this worked, but when I want to change the 'X' to black (because the overlay is white) it also changes the three stripes back to black

Replace this code

<style>
    .burger-inner:before>div {
              background: #AAAAAA !important;
  }
      .burger-inner:after>div {
            background: #F8F6F4 !important;
}
</style>

to this code

<style>
    body.header--menu-open .burger-inner div {
              background: #000 !important;
  }
</style>

4. Change logo (Mobile) / this one is not working at all

It looks like you solved?