hamburger-icon Need to change hamburger icon colour after it's clicked

Site URL: https://www.tinanairpics.com/contact

Hello,

I'm trying to figure out how to make a mobile-view hamburger icon change from white to black on a particular page of a website.

I've currently injected the following code into that particular page's header, to make the hamburger appear white on the pre-clicked version, as the page background itself is dark (unlike the rest of the pages on the site):

<style>
a.icon-hamburger::before {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  }
</style>

That works fine, but once I click on the hamburger icon to see the menu listing, the hamburger itself becomes barely visible as it stays white, while the menu background also becomes white.

I've attached screenshots of the before and after.

The template is forte, Squarespace 7.0.

Thanks in advance to anyone who can help! 🙂

Replace, make a copy somewhere, your CSS with the following.

<style>

  div#canvasWrapper {
  
    background-image : url( https://static1.squarespace.com/static/53514fd4e4b095a1b0b3a6bb/t/62d56f6fb8e3714244383a66/1658154863809/Dark+Green-2.png );
    background-position : center center;
    background-size : cover;
    background-repeat : no-repeat;
    
    }
    
  .ctrl-button .icon-hamburger:before,
  h1.logo.logo-image,
  h2.logo-subtitle,
  nav.main-nav
  
    {
    
      -webkit-filter : invert( 100% );
      filter : invert( 100% );
      
      }
      
  .sqs-mobile-nav-open .ctrl-button .icon-hamburger:before {
  
    -webkit-filter : unset;
    filter : unset;
    
    }
    
  form,
  p
  
    {
    
      color : #fff8dc;
      
      }
      
  </style>

This is for v7.0 using the Forte template and specific to the poster's need.

Let us know how it goes.

Wow - this worked immediately!  Thank you SOOOOO much, creedon!  😀