Seeking CSS to set color of site title text when scrolled down the page and mobile menu is showing.

Site URL: https://sswebdev-one.squarespace.com/

Site URL: https://sswebdev-one.squarespace.com/

The password for our site is: secret

Here are the steps to reproduce the issue I'm trying to solve:

1) Go to the "Contact Us" page at: https://sswebdev-one.squarespace.com/contact-us
2) Adjust the width of your browser so that it's narrow enough to have the mobile hamburger menu display.
3) Scroll down the page so that the black background appears in the header area.
4) Click on the mobile hamburger menu.
Actual Result: The website header text "Test Site" appears in white and it's not visible.
Desired Result: I would like the "Test Site" text to appear orange.

I defined this CSS (for the "Initiatives" and "Contact Us" pages):

#collection-5d375e74792ad1000134157d, #collection-5d3773b4c6dce00001b488b3 {
    .tweak-fixed-header .shrink.header .header-title-logo a:after  {
        color: orange!important;
    }
}
but I think this CSS (below) is overriding the CSS for the "Initiatives" and "Contact Us" pages:

/* Set font color of site title text to white on scroll */
.tweak-fixed-header .shrink.header .header-title-logo a:after {
  color: white !important;
} 

Thanks in advance for any suggestions you have.
 

10 hours ago, wonderwebber said:

Site URL: https://sswebdev-one.squarespace.com/

Site URL: https://sswebdev-one.squarespace.com/

The password for our site is: secret

Here are the steps to reproduce the issue I'm trying to solve:

1) Go to the "Contact Us" page at: https://sswebdev-one.squarespace.com/contact-us
2) Adjust the width of your browser so that it's narrow enough to have the mobile hamburger menu display.
3) Scroll down the page so that the black background appears in the header area.
4) Click on the mobile hamburger menu.
Actual Result: The website header text "Test Site" appears in white and it's not visible.
Desired Result: I would like the "Test Site" text to appear orange.

I defined this CSS (for the "Initiatives" and "Contact Us" pages):

#collection-5d375e74792ad1000134157d, #collection-5d3773b4c6dce00001b488b3 {
    .tweak-fixed-header .shrink.header .header-title-logo a:after  {
        color: orange!important;
    }
}
but I think this CSS (below) is overriding the CSS for the "Initiatives" and "Contact Us" pages:

/* Set font color of site title text to white on scroll */
.tweak-fixed-header .shrink.header .header-title-logo a:after {
  color: white !important;
} 

Thanks in advance for any suggestions you have.
 

Hi. IT looks like you solved by changing site title to logo image? DO you still need help?

Thanks for checking in. I don't thinkn I changed the site title to the logo image, but I am leaning toward adding the black header section to the "Contact" page and then updating the style of the "Contact" page to match the other pages as it's just too hard to manage 2 different styles.

Bottom Line - I'm all set with this query. No need to follow up. Thanks so much for checking in.